jquery在第一次放置时可拖动偏移

Question

使用 JQuery UI 可拖动/可放置我遇到了可拖动放置区域偏移（通常向左但距离不一致）的问题。图像可以直接在放置区域上方并失败，并且在下一次尝试时，在完全相同的位置，通过。

因此，拖动的项目在鼠标上看起来在正确的位置，但在放下时不正确......但只是第一次尝试。

function dragAndDrop(draggedItem,dropZone,size)
{
    var bool = 0;
    var draggedItem = $(draggedItem);
    var dragFromLeft = draggedItem.offset().left;
    var dragFromTop = draggedItem.offset().top;
    var dropZone = $(dropZone);
    //var size = size;


    draggedItem.draggable //Make item draggable
    ({
        opacity:1, 
        revert:function()//'invalid'
        {
            $(".strobeRed").fadeTo(100, .50).fadeTo(100, 0);
            $(this).offset({top: dragFromTop, left: dragFromLeft})
        },
        drag:function(event, ui)
        {
            $(this).height(size);
            $(this).width(size);
        },
        cursorAt:
        {
            left:(size/2),
            top:(size/2)
        }
    }); 

    dropZone.droppable //Make item droppable
    ({
        accept:draggedItem,
        drop: function(event, ui)
        {
            $( ui.draggable ).fadeOut(),
            $( this ).droppable( "option", "disabled", true ).css("background-color", "green"), //$(this) = $(event.target)
            $( this ).draggable( "option", "disabled", true )
        }
    });
}

sample image

* 编辑 1 从边缘动画添加函数调用 * 可拖动和可放置的对象只是带有类名的 div。

yepnope({nope:['jquery-ui.js','cookbook.js'],complete:init});
function init(){
dragAndDrop(".item1",'.dz1',50);
dragAndDrop(".item2",'.dz2',50);
dragAndDrop(".item3",'.dz3',50);
dragAndDrop(".item4",'.dz4',50);
dragAndDrop(".item5",'.dz5',50);
dragAndDrop(".item6",'.dz6',50);
dragAndDrop(".item7",'.dz7',50);
dragAndDrop(".item8",'.dz8',50);
dragAndDrop(".item9",'.dz9',50);
}

* 编辑 2 修复了问题，引入了另一个 * 通过在添加可拖动对象之前进行缩放，它现在可以正确下降。新问题是我接触的每种类型的第一个项目会缩放并重新定位到指针，但会下降。它不会失败，它只是停止被拖动。

    function dragAndDrop(draggedItem,dropZone,scaleHeight,scaleWidth)
    {
    var bool = 0;
    var draggedItem = $(draggedItem);
    var dragFromLeft = draggedItem.offset().left;
    var dragFromTop = draggedItem.offset().top;
    var dropZone = $(dropZone);
    var currentMousePos = { x: -1, y: -1 };

    draggedItem.mousedown(function(event){
    currentMousePos.x = event.pageX - (scaleWidth/2);
    currentMousePos.y = event.pageY - (scaleHeight/2);
    $(this).height(scaleHeight);
    $(this).width(scaleWidth);
    $(this).offset({top: currentMousePos.y, left: currentMousePos.x});

    draggedItem.draggable //Make item draggable
    ({
        opacity:1, 
        revert:function()//'invalid'
        {
            $(".strobeRed").fadeTo(100, .50).fadeTo(100, 0);
            $(this).offset({top: dragFromTop, left: dragFromLeft})
        }
    })
});

dropZone.droppable //Make item droppable
({
    accept:draggedItem,
    drop: function(event, ui)
    {
        //$( ui.draggable ).fadeOut(),
        $( this ).droppable( "option", "disabled", true ).css("background-color", "green"), //$(this) = $(event.target)
        $( this ).draggable( "option", "disabled", true )
    },
    tolerance: "touch"
});

}

Answer 1

** 我找到了 ** 好的，所以我的第一次尝试是将可拖动对象计算为其原始大小。第二次尝试不是在第一次尝试期间拖动每种类型的第一个项目。我相信它卡在 mousedown 事件中并且没有运行可拖动的。每次该可拖动对象都已应用后，它都可以正常工作。

解决方法是在开始时为所有内容分配可拖动，但将缩放拉到第二个函数中。它现在缩放项目，将其置于鼠标中心，拖放。

function dragAndDrop(draggedItem,dropZone,scaleHeight,scaleWidth)
{
var bool = 0;
var draggedItem = $(draggedItem);
var dragFromLeft = draggedItem.offset().left;
var dragFromTop = draggedItem.offset().top;
var dropZone = $(dropZone);
var currentMousePos = { x: 0, y: 0};

draggedItem.draggable //Make item draggable
({
    opacity:1, 
    revert:function()//'invalid'
    {
        $(".strobeRed").fadeTo(100, .50).fadeTo(100, 0);
        $(this).offset({top: dragFromTop, left: dragFromLeft})
    }
})

draggedItem.mousedown(function(event){
    currentMousePos.x = event.pageX - (scaleWidth/2);  
    currentMousePos.y = event.pageY - (scaleHeight/2);
    $(this).height(scaleHeight);
    $(this).width(scaleWidth);
    $(this).offset({top: currentMousePos.y, left: currentMousePos.x});
});

dropZone.droppable //Make item droppable
({
    accept:draggedItem,
    drop: function(event, ui)
    {
        //$( ui.draggable ).fadeOut(),
        $( this ).droppable( "option", "disabled", true ).css("background-color", "green"), //$(this) = $(event.target)
        $( this ).draggable( "option", "disabled", true )
    },
    tolerance: "touch"
});
}