jQuery 将元素从列表拖放到单独的块中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1452866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drag and drop elements from list into separate blocks
提问by titel
I'm trying to get a jQuery component similar to the one on this site.
我正在尝试获得一个类似于本网站上的 jQuery 组件。
Basically, there is a list with available elements that you can drag and drop into several blocks.
基本上，有一个包含可用元素的列表，您可以将其拖放到多个块中。
I have quite a bit of JavaScript development experience, but I'm quite new to jQuery, the language I want this to be scripted in.
我有相当多的 JavaScript 开发经验，但我对 jQuery 很陌生，我希望用这种语言编写脚本。
Can you please lead me to some example similar to the one showed above, or give me some hints on what would be a good place to start looking for something like this?
能否请您引导我举出一些类似于上面显示的示例，或者给我一些提示，告诉我什么是开始寻找此类内容的好地方？
回答by Thorbj?rn Hermansen
Maybe jQuery UI does what you are looking for. Its composed out of many handy helper functions like making objects draggable, droppable, resizable, sortable etc.
也许 jQuery UI 可以满足您的需求。它由许多方便的辅助函数组成，例如使对象可拖动、可放置、可调整大小、可排序等。
Take a look at sortable with connected lists.
回答by Marcio Mangar
Check this out: http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/I'm using this and I'm happy with the solution.
看看这个：http: //wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/我正在使用这个，我对解决方案很满意。
Right here you can find a demo: http://demo.wil-linssen.com/jquery-sortable-ajax/
在这里你可以找到一个演示：http: //demo.wil-linssen.com/jquery-sortable-ajax/
Enjoy!
享受！
回答by PHP Ferrari
Also check it
也检查一下
jQuery: Customizable layout using drag and drop (examples)
jQuery：使用拖放的可定制布局（示例）
回答by Newton Sarker
I wrote some test code to check JQueryUI drag/drop. The example shows how to drag an element from a container and drop it to another container.
我写了一些测试代码来检查 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 codes-
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-
CSS-
.box-container {
height: 200px;
}
.box-item {
width: 100%;
z-index: 1000
}
Check the plunker JQuery Drag Drop
检查plunker JQuery Drag Drop
回答by Bhanu Pratap
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>- this is just simple here i'm appending html table into a div at the end
- we can achieve this or any thing with a simple concept of calling a JavaScript function when we want (here on drop.)
- In this example you can drag & drop any number of tables, new table will be added below the last table exists in the div other wise it will be the first table in the div.
- here we can add text between tables or we can say the section where we drop tables is editable we can type text between tables.
- 这很简单，我在最后将 html 表附加到 div 中
- 我们可以通过一个简单的概念来实现这个或任何事情，即在我们想要的时候调用一个 JavaScript 函数（这里是 drop。）
- 在此示例中，您可以拖放任意数量的表格，新表格将添加到 div 中存在的最后一个表格下方，否则它将成为 div 中的第一个表格。
- 在这里我们可以在表格之间添加文本，或者我们可以说我们删除表格的部分是可编辑的，我们可以在表格之间输入文本。
Thanks... :)
谢谢... ：）
回答by Debojyoti Mahapatra
Dragging an object and placing in a different location is part of the standard of HTML5. All the objects can be draggable. But the Specifications of below web browser should be followed. API Chrome Internet Explorer Firefox Safari Opera Version 4.0 9.0 3.5 6.0 12.0
拖动对象并放置在不同的位置是 HTML5 标准的一部分。所有对象都可以拖动。但应遵循以下网络浏览器的规范。API Chrome Internet Explorer Firefox Safari Opera 版本 4.0 9.0 3.5 6.0 12.0
You can find example from below: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2
您可以从下面找到示例：https: //www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2
