如何使用较小的克隆创建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？

回答

相关问题