Created
April 11, 2016 13:12
-
-
Save anonymous/0d2581ef306fb471238b2273f428b54a to your computer and use it in GitHub Desktop.
Draggables and droppables demo - Interface plugin for jQuery // source http://jsbin.com/vamarocuba
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="http://interface.eyecon.ro/jquery/jquery.js"></script> <!-- 1.1.2 --> | |
| <meta http-equiv="Content-Language" content="en" /> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>Draggables and droppables demo - Interface plugin for jQuery</title> | |
| <script type="text/javascript" src="http://interface.eyecon.ro/interface/interface.js"></script> | |
| <style id="jsbin-css"> | |
| body | |
| { | |
| background: #fff; | |
| height: 100%; | |
| font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; | |
| font-size: 11px; | |
| min-height: 600px; | |
| } | |
| .myTree, | |
| .myTree ul | |
| { | |
| list-style: none; | |
| padding-left: 22px; | |
| } | |
| .expandImage | |
| { | |
| margin-right: 4px; | |
| } | |
| .folderImage | |
| { | |
| } | |
| .textHolder | |
| { | |
| height: 16px; | |
| line-height: 16px; | |
| padding-left: 6px; | |
| } | |
| span.dropOver | |
| { | |
| background-color: #00c; | |
| color: #fff; | |
| height: 16px; | |
| line-height: 16px; | |
| padding-left: 6px; | |
| } | |
| .treeItem | |
| { | |
| list-style: none; | |
| } | |
| .treeItem:active { | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul class="myTree"> | |
| <li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Folder 1</span> | |
| <ul> | |
| <li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 1 1</span></li> | |
| <li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 1 2</span> | |
| <ul style="display: none;"> | |
| <li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 1 2 1</span></li> | |
| <li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 1 2 2</span></li> | |
| <li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 1 2 3</span></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </li> | |
| <li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Folder 2</span> | |
| <ul> | |
| <li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 2 1</span></li> | |
| <li class="treeItem"><img src="images/folder.png" class="folderImage" /><span class="textHolder">Subfolder 2 2</span></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| <script id="jsbin-javascript"> | |
| $(document).ready( | |
| function() | |
| { | |
| tree = $('#myTree'); | |
| $('li', tree.get(0)).each( | |
| function() | |
| { | |
| subbranch = $('ul', this); | |
| if (subbranch.size() > 0) { | |
| if (subbranch.eq(0).css('display') == 'none') { | |
| $(this).prepend('<img src="images/bullet_toggle_plus.png" width="16" height="16" class="expandImage" />'); | |
| } else { | |
| $(this).prepend('<img src="images/bullet_toggle_minus.png" width="16" height="16" class="expandImage" />'); | |
| } | |
| } else { | |
| $(this).prepend('<img src="images/spacer.gif" width="16" height="16" class="expandImage" />'); | |
| } | |
| } | |
| ); | |
| $('img.expandImage', tree.get(0)).click( | |
| function() | |
| { | |
| if (this.src.indexOf('spacer') == -1) { | |
| subbranch = $('ul', this.parentNode).eq(0); | |
| if (subbranch.css('display') == 'none') { | |
| subbranch.show(); | |
| this.src = 'images/bullet_toggle_minus.png'; | |
| } else { | |
| subbranch.hide(); | |
| this.src = 'images/bullet_toggle_plus.png'; | |
| } | |
| } | |
| } | |
| ); | |
| $('span.textHolder').Droppable( | |
| { | |
| accept : 'treeItem', | |
| hoverclass : 'dropOver', | |
| activeclass : 'fakeClass', | |
| tollerance : 'pointer', | |
| onhover : function(dragged) | |
| { | |
| if (!this.expanded) { | |
| subbranches = $('ul', this.parentNode); | |
| if (subbranches.size() > 0) { | |
| subbranch = subbranches.eq(0); | |
| this.expanded = true; | |
| if (subbranch.css('display') == 'none') { | |
| var targetBranch = subbranch.get(0); | |
| this.expanderTime = window.setTimeout( | |
| function() | |
| { | |
| $(targetBranch).show(); | |
| $('img.expandImage', targetBranch.parentNode).eq(0).attr('src', 'images/bullet_toggle_minus.png'); | |
| $.recallDroppables(); | |
| }, | |
| 500 | |
| ); | |
| } | |
| } | |
| } | |
| }, | |
| onout : function() | |
| { | |
| if (this.expanderTime){ | |
| window.clearTimeout(this.expanderTime); | |
| this.expanded = false; | |
| } | |
| }, | |
| ondrop : function(dropped) | |
| { | |
| if(this.parentNode == dropped) | |
| return; | |
| if (this.expanderTime){ | |
| window.clearTimeout(this.expanderTime); | |
| this.expanded = false; | |
| } | |
| subbranch = $('ul', this.parentNode); | |
| if (subbranch.size() == 0) { | |
| $(this).after('<ul></ul>'); | |
| subbranch = $('ul', this.parentNode); | |
| } | |
| oldParent = dropped.parentNode; | |
| subbranch.eq(0).append(dropped); | |
| oldBranches = $('li', oldParent); | |
| if (oldBranches.size() == 0) { | |
| $('img.expandImage', oldParent.parentNode).src('images/spacer.gif'); | |
| $(oldParent).remove(); | |
| } | |
| expander = $('img.expandImage', this.parentNode); | |
| if (expander.get(0).src.indexOf('spacer') > -1) | |
| expander.get(0).src = 'images/bullet_toggle_minus.png'; | |
| } | |
| } | |
| ); | |
| $('li.treeItem').Draggable( | |
| { | |
| revert : true, | |
| autoSize : true, | |
| ghosting : true/*, | |
| onStop : function() | |
| { | |
| $('span.textHolder').each( | |
| function() | |
| { | |
| this.expanded = false; | |
| } | |
| ); | |
| }*/ | |
| } | |
| ); | |
| } | |
| ); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">body | |
| { | |
| background: #fff; | |
| height: 100%; | |
| font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; | |
| font-size: 11px; | |
| min-height: 600px; | |
| } | |
| .myTree, | |
| .myTree ul | |
| { | |
| list-style: none; | |
| padding-left: 22px; | |
| } | |
| .expandImage | |
| { | |
| margin-right: 4px; | |
| } | |
| .folderImage | |
| { | |
| } | |
| .textHolder | |
| { | |
| height: 16px; | |
| line-height: 16px; | |
| padding-left: 6px; | |
| } | |
| span.dropOver | |
| { | |
| background-color: #00c; | |
| color: #fff; | |
| height: 16px; | |
| line-height: 16px; | |
| padding-left: 6px; | |
| } | |
| .treeItem | |
| { | |
| list-style: none; | |
| } | |
| .treeItem:active { | |
| color: red; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">$(document).ready( | |
| function() | |
| { | |
| tree = $('#myTree'); | |
| $('li', tree.get(0)).each( | |
| function() | |
| { | |
| subbranch = $('ul', this); | |
| if (subbranch.size() > 0) { | |
| if (subbranch.eq(0).css('display') == 'none') { | |
| $(this).prepend('<img src="images/bullet_toggle_plus.png" width="16" height="16" class="expandImage" />'); | |
| } else { | |
| $(this).prepend('<img src="images/bullet_toggle_minus.png" width="16" height="16" class="expandImage" />'); | |
| } | |
| } else { | |
| $(this).prepend('<img src="images/spacer.gif" width="16" height="16" class="expandImage" />'); | |
| } | |
| } | |
| ); | |
| $('img.expandImage', tree.get(0)).click( | |
| function() | |
| { | |
| if (this.src.indexOf('spacer') == -1) { | |
| subbranch = $('ul', this.parentNode).eq(0); | |
| if (subbranch.css('display') == 'none') { | |
| subbranch.show(); | |
| this.src = 'images/bullet_toggle_minus.png'; | |
| } else { | |
| subbranch.hide(); | |
| this.src = 'images/bullet_toggle_plus.png'; | |
| } | |
| } | |
| } | |
| ); | |
| $('span.textHolder').Droppable( | |
| { | |
| accept : 'treeItem', | |
| hoverclass : 'dropOver', | |
| activeclass : 'fakeClass', | |
| tollerance : 'pointer', | |
| onhover : function(dragged) | |
| { | |
| if (!this.expanded) { | |
| subbranches = $('ul', this.parentNode); | |
| if (subbranches.size() > 0) { | |
| subbranch = subbranches.eq(0); | |
| this.expanded = true; | |
| if (subbranch.css('display') == 'none') { | |
| var targetBranch = subbranch.get(0); | |
| this.expanderTime = window.setTimeout( | |
| function() | |
| { | |
| $(targetBranch).show(); | |
| $('img.expandImage', targetBranch.parentNode).eq(0).attr('src', 'images/bullet_toggle_minus.png'); | |
| $.recallDroppables(); | |
| }, | |
| 500 | |
| ); | |
| } | |
| } | |
| } | |
| }, | |
| onout : function() | |
| { | |
| if (this.expanderTime){ | |
| window.clearTimeout(this.expanderTime); | |
| this.expanded = false; | |
| } | |
| }, | |
| ondrop : function(dropped) | |
| { | |
| if(this.parentNode == dropped) | |
| return; | |
| if (this.expanderTime){ | |
| window.clearTimeout(this.expanderTime); | |
| this.expanded = false; | |
| } | |
| subbranch = $('ul', this.parentNode); | |
| if (subbranch.size() == 0) { | |
| $(this).after('<ul></ul>'); | |
| subbranch = $('ul', this.parentNode); | |
| } | |
| oldParent = dropped.parentNode; | |
| subbranch.eq(0).append(dropped); | |
| oldBranches = $('li', oldParent); | |
| if (oldBranches.size() == 0) { | |
| $('img.expandImage', oldParent.parentNode).src('images/spacer.gif'); | |
| $(oldParent).remove(); | |
| } | |
| expander = $('img.expandImage', this.parentNode); | |
| if (expander.get(0).src.indexOf('spacer') > -1) | |
| expander.get(0).src = 'images/bullet_toggle_minus.png'; | |
| } | |
| } | |
| ); | |
| $('li.treeItem').Draggable( | |
| { | |
| revert : true, | |
| autoSize : true, | |
| ghosting : true/*, | |
| onStop : function() | |
| { | |
| $('span.textHolder').each( | |
| function() | |
| { | |
| this.expanded = false; | |
| } | |
| ); | |
| }*/ | |
| } | |
| ); | |
| } | |
| );</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body | |
| { | |
| background: #fff; | |
| height: 100%; | |
| font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; | |
| font-size: 11px; | |
| min-height: 600px; | |
| } | |
| .myTree, | |
| .myTree ul | |
| { | |
| list-style: none; | |
| padding-left: 22px; | |
| } | |
| .expandImage | |
| { | |
| margin-right: 4px; | |
| } | |
| .folderImage | |
| { | |
| } | |
| .textHolder | |
| { | |
| height: 16px; | |
| line-height: 16px; | |
| padding-left: 6px; | |
| } | |
| span.dropOver | |
| { | |
| background-color: #00c; | |
| color: #fff; | |
| height: 16px; | |
| line-height: 16px; | |
| padding-left: 6px; | |
| } | |
| .treeItem | |
| { | |
| list-style: none; | |
| } | |
| .treeItem:active { | |
| color: red; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready( | |
| function() | |
| { | |
| tree = $('#myTree'); | |
| $('li', tree.get(0)).each( | |
| function() | |
| { | |
| subbranch = $('ul', this); | |
| if (subbranch.size() > 0) { | |
| if (subbranch.eq(0).css('display') == 'none') { | |
| $(this).prepend('<img src="images/bullet_toggle_plus.png" width="16" height="16" class="expandImage" />'); | |
| } else { | |
| $(this).prepend('<img src="images/bullet_toggle_minus.png" width="16" height="16" class="expandImage" />'); | |
| } | |
| } else { | |
| $(this).prepend('<img src="images/spacer.gif" width="16" height="16" class="expandImage" />'); | |
| } | |
| } | |
| ); | |
| $('img.expandImage', tree.get(0)).click( | |
| function() | |
| { | |
| if (this.src.indexOf('spacer') == -1) { | |
| subbranch = $('ul', this.parentNode).eq(0); | |
| if (subbranch.css('display') == 'none') { | |
| subbranch.show(); | |
| this.src = 'images/bullet_toggle_minus.png'; | |
| } else { | |
| subbranch.hide(); | |
| this.src = 'images/bullet_toggle_plus.png'; | |
| } | |
| } | |
| } | |
| ); | |
| $('span.textHolder').Droppable( | |
| { | |
| accept : 'treeItem', | |
| hoverclass : 'dropOver', | |
| activeclass : 'fakeClass', | |
| tollerance : 'pointer', | |
| onhover : function(dragged) | |
| { | |
| if (!this.expanded) { | |
| subbranches = $('ul', this.parentNode); | |
| if (subbranches.size() > 0) { | |
| subbranch = subbranches.eq(0); | |
| this.expanded = true; | |
| if (subbranch.css('display') == 'none') { | |
| var targetBranch = subbranch.get(0); | |
| this.expanderTime = window.setTimeout( | |
| function() | |
| { | |
| $(targetBranch).show(); | |
| $('img.expandImage', targetBranch.parentNode).eq(0).attr('src', 'images/bullet_toggle_minus.png'); | |
| $.recallDroppables(); | |
| }, | |
| 500 | |
| ); | |
| } | |
| } | |
| } | |
| }, | |
| onout : function() | |
| { | |
| if (this.expanderTime){ | |
| window.clearTimeout(this.expanderTime); | |
| this.expanded = false; | |
| } | |
| }, | |
| ondrop : function(dropped) | |
| { | |
| if(this.parentNode == dropped) | |
| return; | |
| if (this.expanderTime){ | |
| window.clearTimeout(this.expanderTime); | |
| this.expanded = false; | |
| } | |
| subbranch = $('ul', this.parentNode); | |
| if (subbranch.size() == 0) { | |
| $(this).after('<ul></ul>'); | |
| subbranch = $('ul', this.parentNode); | |
| } | |
| oldParent = dropped.parentNode; | |
| subbranch.eq(0).append(dropped); | |
| oldBranches = $('li', oldParent); | |
| if (oldBranches.size() == 0) { | |
| $('img.expandImage', oldParent.parentNode).src('images/spacer.gif'); | |
| $(oldParent).remove(); | |
| } | |
| expander = $('img.expandImage', this.parentNode); | |
| if (expander.get(0).src.indexOf('spacer') > -1) | |
| expander.get(0).src = 'images/bullet_toggle_minus.png'; | |
| } | |
| } | |
| ); | |
| $('li.treeItem').Draggable( | |
| { | |
| revert : true, | |
| autoSize : true, | |
| ghosting : true/*, | |
| onStop : function() | |
| { | |
| $('span.textHolder').each( | |
| function() | |
| { | |
| this.expanded = false; | |
| } | |
| ); | |
| }*/ | |
| } | |
| ); | |
| } | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment