使用jquery拖放移动或排序内部
我有以下jquery拖放代码。我嵌套了拖放功能。
http://jsfiddle.net/bhumi/nkvzdwk9/10/
尝试在内部移动已删除的项目时无效？
我尝试将connectWith更改为以下行
connectWith: \".ui-sortable\",
见下图
但不行。请帮忙。
4 个答案:
答案 0 :(得分：0)
我刚刚检查了小提琴中的HTML，我发现如果我们将 List2 移出工作区，那么它就可以了。
请检查here
<div class="workarea" style="border: 1px solid green; width: 30%; padding: 0; margin: 0 0 0 15px; float: left">
<h3>Your List</h3></div><ul id="list2" class="connectedSortable ui-sortable" style="border: 1px solid red; width: 100%; height: 500px"></ul>
答案 1 :(得分：0)
检查一下......我修改了你的代码......你现在可以删除你在图像中描述的项目了。
$(function () {
//Radix: Added layout list
$("#list3 li").draggable({
start: function(event, ui) {
console.log('started dragging layout')
},
connectToSortable: "#list2",
helper: "clone",
revert: "invalid",
stop:function(){
}
});
//Radix End
$("#list1 li").draggable({
connectToSortable: "#list2 .drop-container,#list2",
helper: "clone",
revert: "invalid",
greedy: true
});
$("#list2").sortable({
connectWith: "#list1",
over: function () {
removeIntent = false;
$(this).css("background-color", "green");
},
out: function () {
removeIntent = true;
$(this).css("background-color", "orange");
},
beforeStop: function (event, ui) {
itemContext = ui.item.context;
if (removeIntent == true) {
ui.item.remove();
//disp($("#list2").sortable('toArray'));
}
//console.log(itemContext);
},
receive: function (event, ui) {
console.log(ui);
console.log(event);
var this_id = $(ui.item).attr("id");
var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, '');
$(itemContext).attr("id", this_id);
$(itemContext).css("width", '530px').addClass("ui-state-default").height('auto');
$(itemContext).html(preview);
$("#list2 .drop-container").sortable({
connectWith: ".drop-container",
over: function () {
removeIntent = false;
$(this).css("background-color", "pink");
},
out: function () {
removeIntent = true;
$(this).css("background-color", "blue");
},
beforeStop: function (event, ui) {
itemContext = ui.item.context;
if (removeIntent == true) {
//ui.item.remove();
//disp($("#list2").sortable('toArray'));
}
//console.log(itemContext);
}
}); //.disableSelection()
}
}); //.disableSelection()
$("#list2").bind("sortupdate", function (event, ui) {
//console.log($('#list2'));
var result = $('#list2').sortable('toArray');
var str='';
for(var i=0;i<result.length;i++){
str+=result[i]+"|";
var tmp="#"+result[i]+" .drop-container";
if($(tmp).length>0){
$(tmp).each(function(){
if($(this).children("li").length){
str+=$(this).parent()[0].id+"|";
$(this).children("li").each(function(){
str+=this.id+"|";
})
}
})
}
} //console.log(result);
//alert(str);
});
});
#list1, #list2, #list3 {
border:1px solid red;
}
#list1, #list2 {
list-style-type: none;
margin: 0;
padding: 0 0 0;
float: left;
background-color:grey;
}
#list1 li, #list2 li, #list3 li {
margin: 0px 0px 1px 0px;
padding: 2px 0 2px 2px;
font-size: 0.95em;
width: 480px;
cursor: move;
}
#list2 li {
margin: 5px 5px 0 5px;
padding:3px 3px 3px 3px;
font-size: 0.95em;
width: 744px;
cursor: move;
/*height:22px;*/
display: inline-block;
vertical-align:middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.js"></script>
<table id='list3' class='display compact' border='0' cellspacing='0' cellpadding='0' style='color:#000000;'>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<li id="Layout1">
<!--<span><a href="../../test.php?src=&w=700" class="highslide" onclick="return hs.expand(this)" ><button type="button" class="btn btn-xs btn-success">Preview</button></a></span> --><span>Layout1</span>
<!--<span style="float:right;"><input type='text' name='time1[]' value='10' class='input-layout' style='width: 35%;float:right' maxlength='4' onKeyup="return checkIt(this)" ></span> <ul><li id="25"> <button type="button" class="btn btn-xs btn-success" data-toggle="modal" data-target="#AddMediaModel" data-pid="0">Add Media</button>Left<ul class="drop-container" style="min-height: 100px;border:1px solid red"></ul></li><li id="26"> <button type="button" class="btn btn-xs btn-success" data-toggle="modal" data-target="#AddMediaModel" data-pid="0">Add Media</button>Right<ul class="drop-container" style="min-height: 100px;border:1px solid red"></ul></li><li id="27"> <button type="button" class="btn btn-xs btn-success" data-toggle="modal" data-target="#AddMediaModel" data-pid="0">Add Media</button>Front<ul class="drop-container" style="min-height: 100px;border:1px solid red"></ul></li></ul>-->
</li>
</td>
</tr>
<tr>
<td>
<li id="Layout2">
<!--<span><a href="../../test.php?src=&w=700" class="highslide" onclick="return hs.expand(this)" ><button type="button" class="btn btn-xs btn-success">Preview</button></a></span> --><span>Layout2</span>
<!--<span style="float:right;"><input type='text' name='time1[]' value='10' class='input-layout' style='width: 35%;float:right' maxlength='4' onKeyup="return checkIt(this)" ></span> <ul><li id="29"> <button type="button" class="btn btn-xs btn-success" data-toggle="modal" data-target="#AddMediaModel" data-pid="0">Add Media</button>Left<ul class="drop-container" style="min-height: 100px;border:1px solid red"></ul></li><li id="30"> <button type="button" class="btn btn-xs btn-success" data-toggle="modal" data-target="#AddMediaModel" data-pid="0">Add Media</button>Right<ul class="drop-container" style="min-height: 100px;border:1px solid red"></ul></li><li id="31"> <button type="button" class="btn btn-xs btn-success" data-toggle="modal" data-target="#AddMediaModel" data-pid="0">Add Media</button>asd<ul class="drop-container" style="min-height: 100px;border:1px solid red"></ul></li></ul>-->
</li>
</td>
</tr>
<tr>
<td>
<li id="Layout3">
<!--<span><a href="../../test.php?src=&w=700" class="highslide" onclick="return hs.expand(this)" ><button type="button" class="btn btn-xs btn-success">Preview</button></a></span> --><span>Layout3</span>
<!--<span style="float:right;"><input type='text' name='time1[]' value='10' class='input-layout' style='width: 35%;float:right' maxlength='4' onKeyup="return checkIt(this)" ></span> <ul><li id="28"> <button type="button" class="btn btn-xs btn-success" data-toggle="modal" data-target="#AddMediaModel" data-pid="0">Add Media</button>New<ul class="drop-container" style="min-height: 100px;border:1px solid red"></ul></li></ul>-->
</li>
</td>
</tr>
</tbody>
</table>
<br/>
<h3>Media</h3>
<table id='list1' class='display compact' border='0' cellspacing='0' cellpadding='0' style='color:#000000;' ;>
<thead>
<th>File Name</th>
<th>Group</th>
<th>Upload Time</th>
<th>Preview</th>
</thead>
<tbody>
<tr>
<td>
<li id="test.jpg">
<!--<span><a href="../../test.php?src=// test.jpg&w=700" class="highslide" onclick="return hs.expand(this)" ><button type="button" class="btn btn-xs btn-success">Preview</button></a></span> -->test.jpg
<!--<span style="float:right;"><input type='text' name='time1[]' value='10' class='input-layout' style='width: 35%;float:right' maxlength='4' onKeyup="return checkIt(this)" ></span>-->
</li>
</td>
</td>
<td>Test media</td>
<td>11-Mar-15</td>
</tr>
<tr>
<td>
<li id="test.jpg">
<!--<span><a href="../../test.php?src=/test.jpg&w=700" class="highslide" onclick="return hs.expand(this)" ><button type="button" class="btn btn-xs btn-success">Preview</button></a></span> -->test.jpg
<!--<span style="float:right;"><input type='text' name='time1[]' value='10' class='input-layout' style='width: 35%;float:right' maxlength='4' onKeyup="return checkIt(this)" ></span>-->
</li>
</td>
</td>
<td>Test media</td>
<td>26-Mar-15</td>
</tr>
<tr>
<td>
<li id="testimg.jpg">
<!--<span><a href="../../test.php?src=/testimg.jpg&w=700" class="highslide" onclick="return hs.expand(this)" ><button type="button" class="btn btn-xs btn-success">Preview</button></a></span> -->testimg.jpg
<!--<span style="float:right;"><input type='text' name='time1[]' value='10' class='input-layout' style='width: 35%;float:right' maxlength='4' onKeyup="return checkIt(this)" ></span>-->
</li>
</td>
</td>
<td>Test media</td>
<td>26-Mar-15</td>
<td><a href="../../test.php?src=/testimg.jpg&w=700" class="highslide" onclick="return hs.expand(this)"><button type="button" class="btn btn-xs btn-success">Preview</button></a>
</td>
</tr>
<tr>
<td>
<li id="testimg1.jpg">
<!--<span><a href="../../test.php?src=//testimg1.jpg&w=700" class="highslide" onclick="return hs.expand(this)" ><button type="button" class="btn btn-xs btn-success">Preview</button></a></span> -->testimg1.jpg
<!--<span style="float:right;"><input type='text' name='time1[]' value='10' class='input-layout' style='width: 35%;float:right' maxlength='4' onKeyup="return checkIt(this)" ></span>-->
</li>
</td>
</td>
<td>Test media</td>
<td>25-Mar-15</td>
</tr>
</tbody>
</table>
<div class="workarea" style="border:1px solid green; width:45%; padding:0; margin:0 0 0 15px;float:left">
<h3>Your List</h3>
<ul id="list2" class="connectedSortable ui-sortable" style="border:1px solid red; width:100%;height:500px"></ul>
</div>
答案 2 :(得分：0)
尝试使用JQuery UI Sortable，如this example。
另外，尝试建立this basic working example (JSFiddle)。
HTML：
<h3>Name</h3>
<ul id="sortable1" class="droptrue">
<li class="ui-state-default">Layout 1</li>
<li class="ui-state-default">Layout 2</li>
<li class="ui-state-default">Layout 3</li>
</ul>
<h3>Media</h3>
<ul id="sortable2" class="droptrue">
<li class="ui-state-default">test.jpg</li>
<li class="ui-state-default">test.jpg</li>
<li class="ui-state-default">testimg.jpg</li>
<li class="ui-state-default">testimg.jpg1</li>
</ul>
<h3>Your List</h3>
<ul id="sortable3" class="droptrue">
<li class="ui-state-default">Drop here</li>
</ul>
<br style="clear:both" />
JS：
$(function() {
$("ul.droptrue").sortable({
connectWith: "ul"
});
$("ul.dropfalse").sortable({
connectWith: "ul",
dropOnEmpty: false
});
$("#sortable1, #sortable2, #sortable3").disableSelection();
});
CSS：
#sortable1,
#sortable2,
#sortable3 {
list-style-type: none;
margin: 0;
margin-right: 10px;
background: #eee;
padding: 5px;
width: 143px;
}
#sortable1 li,
#sortable2 li,
#sortable3 li {
margin: 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
答案 3 :(得分：0)
你必须在特定事件中的元素之间建立精确的连接，因为在不同的父元素之间存在大量的元素拖放
当所有接收事件进入＃list2时，你需要在*.jpg上调用draggable
$("#list2").find("#test\\.jpg,#testimg\\.jpg,#testimg1\\.jpg").draggable({
connectToSortable: "#list2 .drop-container,#list2",
revert: "invalid",
stop:function(){
}
});
然后正确使用connectWith选项
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？