Question

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

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

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

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

Answer 1

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

看看sortable with connected lists。

Answer 2

检查一下：http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/我正在使用此功能，我对解决方案感到满意。

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

享受！

Answer 3

同时检查

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

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

Answer 4

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

检查plunker JQuery Drag Drop

Answer 5

＆＃13;

 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>");
        }

＆＃13;

 .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);
        }

＆＃13;

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

＆＃13;

这里很简单，我将html表附加到最后的div
我们可以通过一个简单的概念来实现这个或任何事情，在我们想要的时候调用JavaScript函数（这里放弃。）
在这个例子中你可以拖动＆amp;删除任意数量的表，新表将添加到div中存在的最后一个表下面，否则它将是div中的第一个表。
这里我们可以在表之间添加文本，或者我们可以说我们删除表的部分是可编辑的，我们可以在表之间键入文本。

谢谢...：）

Answer 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

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

6 个答案: