Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <script>
- function allowDrop(ev) {
- ev.preventDefault();
- }
- function drag(ev) {
- ev.dataTransfer.setData("text", ev.target.id);
- }
- function drop(ev) {
- var eleid = ev.dataTransfer.getData("Text");
- var el = ev.target;
- if (el.id != 'div1' && el.id != 'div2' && el.id != 'div3' && el.id != 'div4') {
- // el = el.parentNode;
- if(el.id != 'div6') {
- el = document.getElementById('div6');
- }
- }
- el.appendChild(document.getElementById(eleid));
- ev.preventDefault();
- if(el.id == 'div1')
- {
- document.getElementById("txt1").style.display="none";
- }
- else if(el.id == 'div2'){
- document.getElementById("txt2").style.display="none";
- }
- else if(el.id == 'div3'){
- document.getElementById("txt3").style.display="none";
- }
- else if(el.id == 'div4'){
- document.getElementById("txt4").style.display="none";
- }
- else{
- if(el.id == 'div8')
- {
- document.getElementById("txt1").style.display="block";
- }
- }
- }
- function change(box) {
- if ($(box).css('height') == '280px') {
- $(box).css({
- 'width': '850px',
- 'height': '480px',
- 'z-index':'100'
- });
- } else {
- $(box).css({
- 'width': '100%',
- 'height': '280px',
- 'z-index':'00'
- });
- }
- }
- </script>
- </head>
- <body>
- <!-- Container -->
- <div class="container-fluid lil" >
- <div class="row">
- <div class="col-md-4 col-sm-12 sol-xs-12 me" >
- <div class="big-title pull-left">
- <h1 class="col-md-12" style="text-align:center;"><i class="fa fa-heart-o" style="color:"></i>
- Wishlist
- </h1>
- </div>
- <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)" class="go">
- <ul>
- <li>
- <div id="1" class="gh col-md-12" style="background:#F5F5F5" draggable="true" ondragstart="drag(event)">
- <div class="col-md-4">
- <img src="https://www.udemy.com/staticx/udemy/images/v5/logo-green.svg" />
- </div>
- <div class="col-md-8">
- <div class="big-title" style="text-align:center">
- <h3>This is a sample title with a lot of words and letters</h3>
- </div>
- <ul class="col-md-12">
- <li class="col-md-5 "><i class="fa fa-credit-card" aria-hidden="true"> $200</i></li>
- <li class="col-md-7"><i class="fa fa-calendar" aria-hidden="true"> 6 weeks </i></li>
- <li class="col-md-5 "><i class="fa fa-star" aria-hidden="true"> 6/10</i></li>
- <li class="col-md-7"><i class="fa fa-university" aria-hidden="true"> course era </i></li>
- </ul>
- </div>
- <div>
- <ul>
- <li class="col-md-5">
- <a href="" type="submit" class="btn btn-mine pull-left">Go to course</a>
- </li>
- <li class="col-md-7">
- <a href="" type="submit" class="btn btn-default pull-right">Remove</a>
- </li>
- </ul>
- </div>
- </div>
- </li>
- <li>
- <div id="2" class="gh col-md-12" style="background:#F5F5F5" draggable="true" ondragstart="drag(event)">
- <div class="col-md-4">
- <img src="https://www.udemy.com/staticx/udemy/images/v5/logo-green.svg" />
- </div>
- <div class="col-md-8">
- <div class="big-title" style="text-align:center">
- <h3>This is a sample title with a lot of words and letters</h3>
- </div>
- <ul class="col-md-12">
- <li class="col-md-5 "><i class="fa fa-credit-card" aria-hidden="true"> $200</i></li>
- <li class="col-md-7"><i class="fa fa-calendar" aria-hidden="true"> 6 weeks </i></li>
- <li class="col-md-5 "><i class="fa fa-star" aria-hidden="true"> 6/10</i></li>
- <li class="col-md-7"><i class="fa fa-university" aria-hidden="true"> course era </i></li>
- </ul>
- </div>
- <div>
- <ul>
- <li class="col-md-5">
- <a href="" type="submit" class="btn btn-mine pull-right">Go to course</a>
- </li>
- <li class="col-md-7">
- <a href="" type="submit" class="btn btn-default pull-">Remove</a>
- </li>
- </ul>
- </div>
- </div>
- </li>
- <li>
- <div id="8" class="gh col-md-12" style="background:#F5F5F5" draggable="true" ondragstart="drag(event)">
- <div class="col-md-4">
- <img src="https://www.udemy.com/staticx/udemy/images/v5/logo-green.svg" />
- </div>
- <div class="col-md-8">
- <div class="big-title" style="text-align:center">
- <h3>This is a sample title with a lot of words and letters</h3>
- </div>
- <ul class="col-md-12">
- <li class="col-md-5 "><i class="fa fa-credit-card" aria-hidden="true"> $200</i></li>
- <li class="col-md-7"><i class="fa fa-calendar" aria-hidden="true"> 6 weeks </i></li>
- <li class="col-md-5 "><i class="fa fa-star" aria-hidden="true"> 6/10</i></li>
- <li class="col-md-7"><i class="fa fa-university" aria-hidden="true"> course era </i></li>
- </ul>
- </div>
- <div>
- <ul>
- <li class="col-md-5">
- <a href="" type="submit" class="btn btn-mine pull-right">Go to course</a>
- </li>
- <li class="col-md-7">
- <a href="" type="submit" class="btn btn-default pull-">Remove</a>
- </li>
- </ul>
- </div>
- </div>
- </li>
- <li>
- <div id="4" class="gh col-md-12" style="background:#F5F5F5" draggable="true" ondragstart="drag(event)">
- <div class="col-md-4">
- <img src="" />
- </div>
- <div class="col-md-8">
- <div class="big-title" style="text-align:center">
- <h3>This is a sample title with a lot of words and letters</h3>
- </div>
- <ul class="col-md-12">
- <li class="col-md-5 "><i class="fa fa-credit-card" aria-hidden="true"> $200</i></li>
- <li class="col-md-7"><i class="fa fa-calendar" aria-hidden="true"> 6 weeks </i></li>
- <li class="col-md-5 "><i class="fa fa-star" aria-hidden="true"> 6/10</i></li>
- <li class="col-md-7"><i class="fa fa-university" aria-hidden="true"> course era </i></li>
- </ul>
- </div>
- <div>
- <ul>
- <li class="col-md-5">
- <a href="" type="submit" class="btn btn-mine pull-right">Go to course</a>
- </li>
- <li class="col-md-7">
- <a href="" type="submit" class="btn btn-default pull-">Remove</a>
- </li>
- </ul>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <br>
- <div class="col-md-8" id="hide">
- <div class="row " >
- <div class="col-md-6 ">
- <h2 style="color:#1FDA9A;font-weight:400px;font-size:30px;"><strong>Done</strong></h2>
- </div>
- <div class="col-md-6">
- <h2 style="color:#28ABE3"><strong>Tracking</strong></h2>
- </div>
- </div>
- <div class="row boxes">
- <div class="col-md-6" >
- <div class="box first" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
- <button class="left btn btn-2" onclick="change('.first')" type="button"><i class="fa fa-arrows-alt"></i></button>
- <br>
- <div >
- <p id="txt1" class="text" >*Drag and drop something to track it</p>
- </div>
- </div>
- </div>
- <div class="col-md-6">
- <div class="box second" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"">
- <button class="right btn btn-32" onclick="change('.second')" type="button"><i class="fa fa-arrows-alt" aria-hidden="true"></i></button>
- <br>
- <div >
- <p id="txt2" class="text" >*Drag and drop something to track it</p>
- </div>
- </div>
- </div>
- </div>
- <br>
- <div class="row">
- <div class="col-md-6">
- <h2 style="color:#DB3340"><strong>Pursuing</strong></h2>
- </div>
- <div class="col-md-6">
- <h2 style="color:#E8B71A"><strong>Dropped</strong></h2>
- </div>
- </div>
- <div class="row boxes">
- <div class="col-md-6">
- <div class="box third" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
- <button class="left btn btn-4" onclick="change('.third')" type="button"><i class="fa fa-arrows-alt" aria-hidden="true"></i></button>
- <div >
- <p id="txt3" class="text" >*Drag and drop something to traack it</p>
- </div>
- </div>
- </div>
- <div class="col-md-6">
- <div class="box fourth" id="div4" style="background:#E8B71A" ondrop="drop(event)" ondragover="allowDrop(event)">
- <button class="right btn btn-5" onclick="change('.fourth')" type="button"><i class="fa fa-arrows-alt" aria-hidden="true"></i></button>
- <br>
- <div >
- <p id="txt4" class="text" >*Drag and drop something to traack it</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement