JqueryUI，将元素拖动到包含大表的滚动可放置 div 的单元格中 [英] JqueryUI, drag elements into cells of a scrolling droppable div containing large table

问题描述

我遇到了拖放问题.

我希望始终看到正在拖动的元素，并且我希望能够滚动特定的 div 以将元素放到表格的任何单元格中.我还希望能够将元素从任何 div 拖动到任何 div.

这个例子几乎可以正常工作.我的最后一个问题是关于单元格 hoverClass 属性:当我从容器 B"的边界附近的容器 A"拖动一个元素时，我实现了一个自动滚动行为以在我的表到达任何单元格.但是，在滚动模拟之后，hoverClass 不适用于正确的单元格.但是，元素总是被放到正确的单元格中.

https://jsfiddle.net/Bouillou/QvRjL/434/

我的方法正确吗?

编辑

我找到了解决方法.这个想法是在帮助器构造回调期间将元素克隆附加到可滚动容器，然后在 1 毫秒后使用 setTimeout 函数将帮助器附加到主体.辅助位置必须映射到鼠标位置以避免偏移问题.

这是我的最终解决方案:https://jsfiddle.net/Bouillou/QvRjL/434/

我相信有可能开发出最好的方法来做到这一点.

解决方案

显然我的更新是唯一的解决方案.

它已经运行了几个月没有问题.

我找到了解决方法.这个想法是在帮助器构造回调期间将元素克隆附加到可滚动容器，然后在 1 毫秒后使用 setTimeout 函数将帮助器附加到主体.辅助位置必须映射到鼠标位置，以避免偏移问题.

这是我的解决方案:http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() {$(this).draggable({不透明度:0.7，cursorAt: { 上: 15, 左: 50 },appendTo: '身体',收容:'身体'，滚动:真实，助手:函数(){//Hack 将墨盒附加到主体(在其他 div 上方可见)，//但仍然属于可滚动容器$('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>');$("#clone").hide();设置超时(功能(){$('#clone').appendTo('body');$("#clone").show();},1);返回 $("#clone");}});});

I am facing a drag/drop issue.

I want always see the element which is dragging, and I want be able to scroll a specific div to drop the element in any cell of my table. I want also be able to drag element from any div to any div.

This example works almost fine. My last problem is about the cell hoverClass property: when I am dragging an element from the "container A" near the border of the "container B", I implemented an auto-scroll behaviour to navigate in my table to reach any cells. But, after the scroll simulation, the hoverClass is not apply to the right cell. However, the element is always dropped into the right cell.

https://jsfiddle.net/Bouillou/QvRjL/434/

Is my approach correct?

EDIT

I found a workaround. The idea is to append the element clone to the scrollable container during the helper construction callback, then append the helper to the body using a setTimeout function after 1ms. The helper position must be mapped on the mouse position to avoid offset problem.

Here is my final solution: https://jsfiddle.net/Bouillou/QvRjL/434/

I am sure that it is possible to develop a best way to do that.

解决方案

Apparently my update is the only solution.

It is working for months now without problem.

I found a workaround. The idea is to append the element clone to the scrollable container durring the helper construction callback, then append the helper to the body using a setTimeout function after 1ms. The helper position must be mapped on the mouse position to avoid offset problem.

Here is my solution : http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },
        appendTo: 'body',
        containment: 'body',        
        scroll: true,
        helper: function(){ 
            //Hack to append the cartridge to the body (visible above others divs), 
            //but still bellonging to the scrollable container  
            $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>');   
            $("#clone").hide();
            setTimeout(function(){
                $('#clone').appendTo('body'); 
                $("#clone").show();
            },1);
            return $("#clone");
        }    
    });
});​

这篇关于JqueryUI，将元素拖动到包含大表的滚动可放置 div 的单元格中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！