Therefore, we still need to work on our own, or stick to the simple code style that is beautiful.
Try embedding a test page in iframe. You can drag the project with the mouse to adjust the category:
Of course, this is not the final effect I want. I can only say that it has achieved a drag-and-drop effect I want. On this basis, I want to add automatic sorting and restore the jQuery event of the element bind after the position change.
Code
The Code is as follows. to copy a file, check the plain text version first!
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<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 ();
$ ('Lil', $ ('# 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 ();
$ ('Lil', this). draggable ({remove: 'invalid', helper: 'clone '});
}
});
$ ('# Menu. folder p'). click (function (){
$ (This). next (). toggle ();
});
</Script>