jQuery Sortable和Droppable与自己的元素
[英]Jquery Sortable and droppable with their own element
问题描述
HTML A 
HTML A
<div class="template_menu1 droppable1 id="main_list1">
<div class="draggable" id="superwear2_current">
<span style="float:left" class="listing">
<i class="fa fa-th-large"></i>
</span>
</div>
<div class="draggable" id="superwear3_current">
<span style="float:left" class="listing">
<i class="fa fa-th-large"></i>
</span>
</div>
</div>
HTML B HTML B
<div class="template_menu droppable" id="main_list">
<div class="draggable" id="banner">
<span style="float:left" class="listing">
<i class="fa fa-th-large"></i>
</span>
</div>
<div class="draggable" id="multitab">
<span style="float:left" class="listing">
<i class="fa fa-th-large"></i>
</span>
</div>
</div>
HTML C HTML C
<div class="site_template droppable droppable1" id="column_left">Left Column</div>
JAVASCRIPT JAVASCRIPT
$( ".droppable,.droppable1" ).sortable({
connectWith: '.droppable,.droppable1',
revert: 200,
tolerance:'pointer',
start: function(){
},
stop: function(event,ui){
},
zIndex: 10
}).droppable({
drop: function(ev, ui) {
}
});
QUESTION: I tried to created 3 box which is A, B, C with able to sortable and droppable . 问题：我试图创建3个框，分别是A，B，C ，并具有可 排序和可拖放的功能 。 Above code is able to drag and drop each other. 上面的代码能够拖放对方。 For example, Element inside A are able to drag to A and B ,Element inside B are able to drag to A and C and Element inside C are able to drag to A and B . 例如，A的内部元件能够拖动到A和B，B的内部元件能够拖动到A和C和元件内部C被能够拖动到A和B.
Furthermore, this is not what I want, I want it will be Element inside A only able to drag to Element C and also can drag back to Element A , then Element inside B only able to drag to Element C and also can drag back to Element A 此外， 这不是我想要的，我希望它是A内的 Element只能拖动到Element C，也可以拖动回Element A ，然后B内的Element只能拖动到Element C并可以拖动回到元素A
Please advise, really no idea about that :( 请指教，真的不知道:(
Working Demo http://jsfiddle.net/PWh2L/72/ 工作演示 http://jsfiddle.net/PWh2L/72/
3 个解决方案
解决方案1
1 2017-05-18 06:45:27
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1,#div2,#div3 {
width: 300px;
height: 150px;
padding: 10px;
border: 1px solid #aaaaaa;
}
p{float:left; width:50px; height:20px;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
if(ev.target.id == "div3")
ev.target.appendChild(document.getElementById(data));
else if(data.substring(0,4) == ev.target.id)
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<p>A</p>
<p id="div1Text1" draggable="true" ondragstart="drag(event)">Text11</p>
<p id="div1Text2" draggable="true" ondragstart="drag(event)">Text12</p>
<p id="div1Text3" draggable="true" ondragstart="drag(event)">Text13</p>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<p>B</p>
<p id="div2Text1" draggable="true" ondragstart="drag(event)">Text21</p>
<p id="div2Text2" draggable="true" ondragstart="drag(event)">Text22</p>
<p id="div2Text3" draggable="true" ondragstart="drag(event)">Text23</p>
</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<p>C</p>
</div>
</body>
</html>
解决方案2
1 已采纳 2017-05-18 07:13:14
Just connect the sortables in the right order: A with C, B with C and C with A. 只需以正确的顺序连接可排序对象：A与C，B与C和C与A。
See updated jsfiddle: 查看更新的jsfiddle：
added ids for the divs
http://jsfiddle.net/PWh2L/74/ http://jsfiddle.net/PWh2L/74/
Updated it again, hope you understand the logis behind it as well: http://jsfiddle.net/PWh2L/85/ 再次更新了它，希望您也理解它背后的逻辑： http : //jsfiddle.net/PWh2L/85/
解决方案3
1 2017-05-18 07:24:04
by using accept option : 通过使用accept选项：
<script>
$(function() {
$(".droppable").droppable({
greedy : true,
// accept from both draggable area 1 and draggable area 2
accept : '#draggable1 .listing1, #draggable2 .listing2',
});
$("#draggable2").droppable({
greedy : true,
// accept only from itself
accept : '#draggable2 .listing2',
});
$("#draggable1").droppable({
greedy : true,
// accept only from itself
accept : '#draggable1 .listing1',
});
});
</script>
live demo : https://jsfiddle.net/q4dbu9fh/ 现场演示： https : //jsfiddle.net/q4dbu9fh/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.