jQuery – 将列表中的元素拖放到单独的块中

我试图得到一个类似于这个网站的jQuery组件。

基本上,有一个可用的元素列表,你可以拖放到几个块。

我有相当多的JavaScript开发经验,但我对jQueryjQuery ,我希望这个语言能够被编写。

你们可以请我带一些类似于上面所示的例子,或给我一些提示什么是一个好地方开始寻找这样的东西?

也许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/

请享用!

我写了一些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