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

Question

我正在尝试获得类似于此站点上的jQuery组件.

基本上,有一个包含可用元素的列表,您可以将其拖放到多个块中.

我有很多JavaScript开发经验,但我对jQuery很新,我希望将其编写为脚本.

你能否请我引导一些类似上面所示的例子,或者给我一些关于什么是开始寻找这样的好地方的提示？

Answer 1

也许jQuery UI可以满足您的需求.它由许多方便的辅助函数组成,例如使对象可拖动,可放置,可调整大小,可排序等.

看看可连接列表的可排序.

Answer 2

看看这个:http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/我正在使用这个,我很满意这个解决方案.

在这里你可以找到一个演示:http://demo.wil-linssen.com/jquery-sortable-ajax/

请享用!

Answer 3

Also check it

jQuery: Customizable layout using drag and drop (examples)

http://devheart.org/examples/jquery-customizable-layout-using-drag-and-drop/1-getting-started-with-sortable-lists/

Answer 4

我写了一些测试代码来检查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 Drag Drop