Question

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

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

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 从边缘动画添加函数调用* draggable和droppable对象只是带有类名的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

**我发现它** 好的，所以我的第一次尝试是将draggable计算为原始大小。第二次尝试不是在第一次尝试期间拖动每种类型的第一项。我相信它被困在mousedown事件中而没有运行可拖动的事件。每次可拖动后都已应用，所以它有效。

修复是在开始时将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"
});
}

第一次下降时jquery可拖动偏移

1 个答案: