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

【问题标题】：Drag and drop elements from list into separate blocks将列表中的元素拖放到单独的块中
【发布时间】：2010-11-29 23:40:24
【问题描述】：

我正在尝试获得一个类似于 this site 的 jQuery 组件。

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

我有相当多的 JavaScript 开发经验，但我对 jQuery 很陌生，我希望用这种语言编写脚本。

您能否带我看一些类似于上面显示的示例，或者给我一些提示，告诉我从什么地方开始寻找类似的东西是一个好地方？

【问题讨论】：

小修正：jQuery 不是语言而是框架。它仍然是你所知道的相同的 JavaScript - 可以说让思考变得更容易似乎有所不同;)
JQuery 不是一个框架，它是一个库。
本教程详细解释了如何创建一个jQuery拖放待办事项列表。 programmerblog.net/jquery-drag-drop-todo-list-php-mysql

标签： jquery drag-and-drop

【解决方案1】：

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

看看sortable with connected lists。

【讨论】：

【解决方案2】：

我写了一些测试代码来检查 JQueryUI 拖放。该示例展示了如何将一个元素从一个容器中拖放到另一个容器中。

标记-

<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
}

检查插件JQuery Drag Drop

【讨论】：

【解决方案3】：

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

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

享受吧！

【讨论】：

【解决方案4】：

也检查一下

jQuery：使用拖放自定义布局（示例）

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

【讨论】：

【解决方案5】：

 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>

这很简单，我将 html 表格添加到最后的 div 中
我们可以用一个简单的概念来实现这个或任何事情
在此示例中，您可以拖放任意数量的表，新表将添加到 div 中存在的最后一个表的下方，否则它将是 div 中的第一个表。
在这里我们可以在表格之间添加文本，或者我们可以说我们删除表格的部分是可编辑的，我们可以在表格之间键入文本。

谢谢... :)

【讨论】：

【解决方案6】：

拖动对象并将其放置在不同的位置是 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

【讨论】：