Jquery列表拖放
Jquery list drag drop
我有一个Jquery拖放列表,我想使用Jquery Ajax Post立即在MYSQL中更新它。
因为我可以在列表(多个列表)之间拖动元素,所以我需要获取父 ID(父级是列表类别 ID - 可拖动对象拖动到的位置)
当我从一个类别/列表拖动到另一个类别/列表时,我总是得到以前的ID。
例如:
1 类 ------------ 2 类
如果我要将某些内容从 CAT1 拖到 CAT2 - ID 将是 CAT1 而不是新的类别 ID......
我在下面添加了我的代码:
Jquery:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.sortable.js"></script>
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".mouseup").mouseleave(function(){
var sparent = $(this).parent().attr("id");
alert(sparent);
});
});
</script>
列表网址:
<div class="demo">
<div class="box">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default mouseup">Item 1</li>
<li class="ui-state-default mouseup">Item 2</li>
</ul>
</div>
<div class="box">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight mouseup">Item 1</li>
<li class="ui-state-highlight mouseup">Item 2</li>
</ul>
</div>
</div>
任何帮助将不胜感激。
提前谢谢你!
你想要的在这里:http://jqueryui.com/demos/draggable/#events
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
stop: function(event, ui) { alert($(ui.item).parent().attr("id") }
}).disableSelection();
将代码放在停止回调中将允许您检查正确的 ID。
您需要
处理的事件是received
。
$(".connectedSortable" ).on( "sortreceive", function(event, ui) {
alert(ui.item.parent()[0].id);
// also ui.sender will hold original list, from where element was taken
});
编辑:取决于您是否需要处理项目刚刚重新排序的情况,即您在同一列表中拖放,或者您不打算使用received
或stop
事件。 received
仅在您拖动到另一个列表时触发。 即使您将项目保留在同一列表中,stop
也会触发。
相关文章:
- 为什么HTML5拖放的目标是孩子?(可排序列表)
- 如何在Javascript中创建排序、拖放多级列表
- Jquery列表拖放
- 如何允许我的访问者通过拖放来排列列表项目
- 如何使用拖放创建带有链接的列表
- 如何将 jQuery UI 连接列表拖放限制为单个方向
- 如何在没有ng重复的情况下制作模板,并使用角度拖放列表将数据传递给$scope
- HTML5拖放教程 - 可排序列表
- 在 JQuery UI 拖放后查找列表中元素的索引
- jQuery拖放然后打开特定于每个列表项的警报
- JQueryUI:创建两个拖放列表的最佳方式,其中一个是可排序的,另一个在拖放时重新排序
- 如何使拖放列表复制而不是移动列表项
- Onsen UI+可排序列表(拖放)
- 通过JavaScript读取拖放顺序列表
- Dojo拖放;列表中的列表”;(嵌套列表)
- AngularJS: angular-拖放列表dnd-allowed-types在匹配dnd-type时不会求值为tru
- 拖放列表-两种方式
- 通过Ajax调用删除和追加列表后,拖放列表不工作
- 基于特定条件的拖放列表
- 角度 |如何包含拖放列表