jQueryUI draggable + sortable bug(无法读取undefined的属性'options')

 书友76132462 发布于 2023-02-12 17:17

我的问题似乎与这个问题相似:

从可排序列表拖动到拖放插件

但由于没有给出那个答案,我想知道是否有人能够/能够和我一起解决这个问题.我遇到的问题是我创建了一个可拖动的div并将其附加到一个可以排序的div中.当我指定任何这样的参数时:

$(el).sortable({ ... arguments ... }); 

当元素被删除时会导致错误,如果留空,它会很奇怪地工作正常并且没有问题.该错误还会阻止可拖动元素触发任何函数.

Uncaught TypeError: Cannot read property 'options' of undefined 
jquery-ui-1.10.3.custom.js:2204

$.ui.plugin.add.stop                         jquery-ui-1.10.3.custom.js:2204
$.extend.plugin.call                         jquery-ui-1.10.3.custom.js:284
$.widget._trigger                            jquery-ui-1.10.3.custom.js:2017
(anonymous function)                         jquery-ui-1.10.3.custom.js:401
$.widget._mouseStop                          jquery-ui-1.10.3.custom.js:1702
(anonymous function)                         jquery-ui-1.10.3.custom.js:401
$.widget._mouseUp                            jquery-ui-1.10.3.custom.js:957
(anonymous function)                         jquery-ui-1.10.3.custom.js:401
$.widget._mouseUp                            jquery-ui-1.10.3.custom.js:1721
(anonymous function)                         jquery-ui-1.10.3.custom.js:401
$.widget._mouseDown._mouseUpDelegate         jquery-ui-1.10.3.custom.js:913
jQuery.event.dispatch                        jquery-1.10.2.js:5095
jQuery.event.add.elemData.handle             jquery-1.10.2.js:4766

这是出错的代码:

$.ui.plugin.add("draggable", "cursor", {
    start: function() {
        var t = $("body"), o = $(this).data("ui-draggable").options;
        if (t.css("cursor")) {
            o._cursor = t.css("cursor");
        }
        t.css("cursor", o.cursor);
    },
    stop: function() {
        var o = $(this).data("ui-draggable").options;
        if (o._cursor) {
            $("body").css("cursor", o._cursor);
        }
    }
});

var o = $(this).data("ui-draggable").options;$(this).data()只包含:对象{ID: "C17"}

示例代码:

$('.draggable').draggable({
  connectToSortable: '.sortable',
  drop: function(){
    console.log('Element dropped');
  }
});

$('.sortable').sortable({
  update: function(){
     console.log('sortable updated'); 
  }
});

JSBin示例:http://jsbin.com/eHUKuCoL/9/edit?html,js,output. 希望有人能够告诉我问题是什么以及解决问题的方法是什么.

1 个回答
  • 根据文档Jquery UI Draggable Documentation,您需要将helper参数设置为"clone",以使connectWithSortable功能完美地工作.

    一旦我这样做,它就停止了抛出错误.

    更新了JSBin

    另外一个注意事项,draggable在其文档中没有'drop'方法,所以你可能必须包含droppable插件,如果这就是你想要的.

    最后,如果你必须使用clone作为辅助方法,你可能需要添加一些css以使其运行更顺畅.

    干杯.

    2023-02-12 17:20 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有