Question

我正在尝试优化页面上的响应时间，其中“大”表是一个jquery droppable，可以接受~6个draggables。和其他人一样，我在制作每个可放置的时候都看到了很差的响应时间。我已经阅读了this post和this post，但我似乎无法让我的代码工作。

我的基本问题是我不知道如何获取拖放draggable的元素的引用。似乎唯一可以访问的元素是实际可拖动的。

以下是我如何定义我的jquery代码：

$( "#grid table" ).droppable({
                    //disabled: 'true',
                    //activate: function (event, ui) {
                    //          console.log("Activated table")
                    //},
                    //over: function (event, ui) {
                      //      console.log("Dragged over")
                    //},
                    //activeClass: "ui-state-default",
                    //hoverClass: "ui-state-hover",
                    accept: ":not(.ui-sortable-helper)",
                    tolerance: 'pointer',
                    drop: function( event, ui ) {
                            console.log("draggable DROPPED!!!");
                            //$( this ).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);
                            var cell = document.elementFromPoint(event.pageX - $(window).scrollLeft(), event.pageY - $(window).scrollTop());

                            console.log('Dropped cell is'+cell);
                            console.log(ui.position)
                            console.log(ui.offset)
                            console.log(document.elementFromPoint(ui.position.left, ui.position.top))
                            $(cell).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);

                            console.log('Setting background to:'+ui.draggable.attr("colorValue"));  
                    }

非常感谢您提供的任何帮助。

Answer 1

$（this）in drop：function（event，ui）指的是删除了draggable的元素

JQuery droppable和大表

1 个答案: