Jquery ui jquery第一次拖放时的可拖动偏移

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

所以，拖动的项目看起来在鼠标上方的正确位置，但在拖放时是不正确的。。。但这只是第一次尝试

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 )
        }
    });
}

*编辑1 添加来自edge animate的函数调用* 可拖动和可拖放对象只是具有类名的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"
});

}我找到了** 好的，我的第一次尝试是计算拖拽物的原始尺寸。第二次尝试没有在第一次尝试期间拖动每种类型的第一项。我相信它被困在了mousedown事件中，没有运行Dragable。在那之后，每一次拖动都已经被应用，所以它起作用了

修复方法是在开始时将draggable分配给所有对象，但将缩放拉入第二个函数。它现在可以缩放物品，将其置于鼠标中心，拖放物品

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"
});
}

**我找到了** 好的，我的第一次尝试是计算拖拽物的原始尺寸。第二次尝试没有在第一次尝试期间拖动每种类型的第一项。我相信它被困在了mousedown事件中，没有运行Dragable。在那之后，每一次拖动都已经被应用，所以它起作用了

修复方法是在开始时将draggable分配给所有对象，但将缩放拉入第二个函数。它现在可以缩放物品，将其置于鼠标中心，拖放物品

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"
});
}

---

你也可以分享HTML/小提琴吗？它是用edge动画制作的**试图在此处添加代码，但无效。将添加original@ryan可拖动的初始尺寸是多少？宽度109，高度184。这个问题让我思考，所以我让构建边缘文件的人将PNG制作成与div相同的大小。这没有帮助。在我看来，下降是根据预先缩放的div大小计算的，因为缩放是永久的，所以第二次计算是准确的。我相信我需要找到一种方法来计算缩放的div大小，然后才能进行拖放。你也可以共享HTML/小提琴吗？它是在edge animate中制作的**试图在此处添加代码，但无效。将添加original@ryan可拖动的初始尺寸是多少？宽度109，高度184。这个问题让我思考，所以我让构建边缘文件的人将PNG制作成与div相同的大小。这没有帮助。在我看来，下降是根据预先缩放的div大小计算的，因为缩放是永久的，所以第二次计算是准确的。我相信我需要找到一种方法来计算缩放的div大小，然后才能执行可拖放操作。