jquery可拖拽第一次偏移

Question

使用JQuery UI可拖拽/ 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 添加函数调用* 拖动和投掷的对象只是与类名的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" 
}); 
}