如何使用較小的克隆創建JQuery Draggable？

我有一個大的元素顯示在屏幕上，我希望能夠放在更小的放置目標上。因此，我想減小可拖動克隆的大小以匹配放置目標的大小。我認爲這看起來不錯。我似乎無法在拖動時將較小的克隆集中在光標周圍。有任何想法嗎？下面是我的嘗試： http://jsfiddle.net/a3Cj2/如何使用較小的克隆創建JQuery Draggable？

$(".draggable").draggable({ 
    helper: 'clone', 
    start : function(event, ui){ 
     ui.helper.animate({ 
      width: 80, 
      height: 50 
     }); 
    }, 
    drag : function(event, ui){ 
     ui.helper.offset({ 
      left: event.pageX, 
      top: event.pageY 
     }); 
    } 
}); 

$("#target").droppable({ 
    drop : function(event, ui) { 
     console.log('dropped');  
    } 
});

來源

2013-04-29 Jon Hargett

最簡單的方法是使用cursorAt選項，將'left'和'top'設置爲縮小助手的一半尺寸。

$(".draggable").draggable({ 
    helper: 'clone', 
    start: function (e, ui) { 
     ui.helper.animate({ 
      width: 80, 
      height: 50 
     }); 
    }, 
    cursorAt: {left:40, top:25} 
});

Updated fiddle

來源

2013-04-29 22:15:34

這簡單得多，而且有訣竅。但是，它並不具有將動作設置爲中心的效果。 – 2013-04-29 22:46:03

@MikeMarcacci，你說的對，這裏的收縮效應比你的答案更有吸引力，儘管nett的結果是一樣的。對我而言，這種方法的一大優點是，幫手不會以稍後在某些情況下可能成爲問題的利潤率結束。 – 2013-04-29 23:13:17

是的，我確實同意你的看法。如果對象一旦被刪除就被破壞，那麼使用邊距就沒有問題了，但是如果在此之後的任何時候都會說出來，那麼你的解決方案是一個更好的主意。 – 2013-04-29 23:32:08

哇，花了比我想的更多的工作！以下是修正：

$(".draggable").draggable({ 
    helper: 'clone', 
    start : function(event, ui){ 
     ui.helper.animate({ 
      width: 80, 
      height: 50, 
      marginLeft: (300-80)/2 - (300/2 - event.offsetX), 
      marginTop: (200-50)/2 - (200/2 - event.offsetY) 
     }); 
    }, 
    drag : function(event, ui){ 

    } 
}); 

$("#target").droppable({ 
    drop : function(event, ui) { 
     console.log('dropped');  
    } 
});

您需要考慮事件位置並根據兩個大小可拖動的中心之間的差異來居中。

See fiddle here。

來源

2013-04-29 21:28:48

還要注意，我一直在那裏的寬度和高度，所以你可以看到發生了什麼事情，但'（300-80）/ 2 - （300/2 - event.offsetX ）'真的可以簡化爲'event.offsetX-40' – 2013-04-29 21:31:37

如何使用較小的克隆創建JQuery Draggable？

回答

相關問題