jQuery – 将列表中的元素拖放到单独的块中
我试图得到一个类似于这个网站的jQuery组件。
基本上，有一个可用的元素列表，你可以拖放到几个块。
我有相当多的JavaScript开发经验，但我对jQuery很jQuery ，我希望这个语言能够被编写。
你们可以请我带一些类似于上面所示的例子，或给我一些提示什么是一个好地方开始寻找这样的东西？
也许jQuery UI做你正在寻找的东西。 它由许多方便的帮助函数组成，如使对象可拖动，可拖放，可resize，可sorting等。
看看连接列表sorting 。
检查了这一点： http : //wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/我使用这个，我很高兴的解决scheme。
在这里你可以find一个演示： http : //demo.wil-linssen.com/jquery-sortable-ajax/
请享用！
也检查它
jQuery：使用拖放可自定义布局（示例）
我写了一些testing代码来检查JQueryUI的拖放。 该示例演示如何从容器中拖动元素并将其放到另一个容器中。
Markup-
<div class="row"> <div class="col-xs-3"> <div class="panel panel-default"> <div class="panel-heading"> <h1 class="panel-title">Panel 1</h1> </div> <div id="container1" class="panel-body box-container"> <div itemid="itm-1" class="btn btn-default box-item">Item 1</div> <div itemid="itm-2" class="btn btn-default box-item">Item 2</div> <div itemid="itm-3" class="btn btn-default box-item">Item 3</div> <div itemid="itm-4" class="btn btn-default box-item">Item 4</div> <div itemid="itm-5" class="btn btn-default box-item">Item 5</div> </div> </div> </div> <div class="col-xs-3"> <div class="panel panel-default"> <div class="panel-heading"> <h1 class="panel-title">Panel 2</h1> </div> <div id="container2" class="panel-body box-container"></div> </div> </div> </div>
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拖放
function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); } function allowDrop(event) { event.preventDefault(); } function drop(event) { $("#maincontainer").append("<br/><table style='border:1px solid black; font-size:20px;'><tr><th>Name</th><th>Country</th><th>Experience</th><th>Technologies</th></tr><tr><td> Bhanu Pratap </td><td> India </td><td> 3 years </td><td> Javascript,Jquery,AngularJS,ASP.NET C#, XML,HTML,CSS,Telerik,XSLT,AJAX,etc...</td></tr></table>"); }
.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); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> <p ondragstart="dragStart(event)" draggable="true" id="dragtarget">Drag Table</p> </div> <div id="maincontainer" contenteditable=true data-text="Drop here..." class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
拖动对象并放置在不同的位置是HTML5标准的一部分。 所有的对象都可以拖动。 但下面的网页浏览器的规格应遵循。 API Chrome浏览器Firefox Safari Safari版本4.0 9.0 3.5 6.0 12.0
你可以从下面find例子： https : //www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2
