将列表中的元素拖放到单独的块中
我正在尝试获得类似于此站点上的jQuery组件。
基本上，有一个包含可用元素的列表，您可以将其拖放到多个块中。
我有很多JavaScript开发经验，但我对jQuery很新，我希望这个语言可以编写脚本。
你能否引导我看一些类似上面所示的例子，或者给我一些关于什么是开始寻找这样的好地方的提示？
也许jQuery UI可以满足您的需求。 它由许多方便的辅助函数组成，例如使对象可拖动，可放置，可resize，可排序等。
看看可连接列表的可排序 。
看看这个： http ： //wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/我正在使用这个，我对解决方案很满意。
在这里你可以找到一个演示： http ： //demo.wil-linssen.com/jquery-sortable-ajax/
请享用！
还检查一下
jQuery：使用拖放自定义布局（示例）
我写了一些测试代码来检查JQueryUI的拖放。 该示例显示如何从容器中拖动元素并将其放到另一个容器中。
Markup-
Panel 1
Item 1 Item 2 Item 3 Item 4 Item 5 Panel 2
JQuery代码 –
$(document).ready(function() { $('.box-item').draggable({ cursor: 'move', helper: "clone" }); $("#container1").droppable({ drop: function(event, ui) { var itemid = $(event.originalEvent.toElement).attr("itemid"); $('.box-item').each(function() { if ($(this).attr("itemid") === itemid) { $(this).appendTo("#container1"); } }); } }); $("#container2").droppable({ drop: function(event, ui) { var itemid = $(event.originalEvent.toElement).attr("itemid"); $('.box-item').each(function() { if ($(this).attr("itemid") === itemid) { $(this).appendTo("#container2"); } }); } }); });
CSS-
.box-container { height: 200px; } .box-item { width: 100%; z-index: 1000 }
检查plunker JQuery Drag Drop
function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function allowDrop(event) { event.preventDefault(); } function drop(event) { $("#maincontainer").append("
Name Country Experience Technologies Bhanu Pratap India 3 years Javascript,Jquery,AngularJS,ASP.NET C#, XML,HTML,CSS,Telerik,XSLT,AJAX,etc...
"); }
.droptarget { float: left; min-height: 100px; min-width: 200px; border: 1px solid black; margin: 15px; padding: 10px; border: 1px solid #aaaaaa; } [contentEditable=true]:empty:not(:focus):before { content: attr(data-text); }
Drag Table
拖动对象并放置在不同的位置是HTML5标准的一部分。 所有对象都可以拖动。 但应遵循以下Web浏览器的规格。 API Chrome Internet Explorer Firefox Safari Opera版本4.0 9.0 3.5 6.0 12.0
您可以从下面找到示例： https ： //www.w3schools.com/html/tryit.asp？filename = tryhtml5_draganddrop2