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