Therefore, or to do their own clothing, or adhere to simple is beautiful code style.
Try embedding a test page in the IFRAME, you can drag items using the mouse, adjust the category:
Of course, this is not the final effect I want, only that it has achieved a drag-and-drop effect I want. I asked on this basis, but also to increase the automatic sorting, location changes after the elements bind to restore the jquery event and so on.
Code
The code is as follows, if you want to copy, check the plain text version first!
Copy Code code as follows:
<! DOCTYPE html>
<title>drag & Drop test</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script type= "Text/javascript"
Src= "https://readself.com/static/js/jquery.min.js?v=52337" ></script>
<script type= "Text/javascript"
Src= "https://readself.com/static/js/jquery-ui.min.js?v=ab482" ></script>
<link rel= "stylesheet" type= "Text/css"
href= "Https://readself.com/static/css/smoothness/jquery-ui.css?v=af3ef"/>
<style type= "Text/css" >
Li {cursor:pointer}
. menu_hover {background-color: #d0d0d0;}
#menu p{margin:5px 0 5px 0;}
</style>
<body>
<ul id= "Menu" >
<li class= "Folder" >
<p>Fruits</p>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Banana</li>
</ul>
</li>
<li class= "folder" ><p>Vegetables</p>
<ul>
<li>Tomato</li>
<li>Potato</li>
<li>Cucumber</li>
</ul>
</li>
<li class= "folder" ><p>Meet</p>
<ul>
<li>Beaf</li>
<li>Pork</li>
<li>Chicken</li>
</ul>
</li>
</ul>
<script>
$ (' #menu Li '). Disableselection ();
$ (' Li ', $ (' #menu ul ')). Draggable ({revert: ' invalid ', Helper: ' Clone '});
$ (' #menu. Folder '). Droppable ({
Hoverclass: "Menu_hover",
Drop:function (event, UI) {
if (ui.draggable.parents ('. Folder '). Get (0) = = $ (this). Get (0))
return;
$ (' ul ', this). Append (Ui.draggable.clone ());
Ui.draggable.remove ();
$ (' Li ', this). Draggable ({remove: ' invalid ', Helper: ' Clone '});
}
});
$ (' #menu. Folder P '). Click (function () {
$ (this). Next (). Toggle ();
});
</script>