如何使用JQuery制作可拖动的小克隆？

Question

我有一个大元素在屏幕上显示，我想将其拖放到较小的目标上。因此，我希望缩小可拖动克隆的大小以匹配下拉目标的大小。我认为用动画效果会更好看。但是，我似乎不能在拖动时让较小的克隆物围绕光标居中。你有什么想法吗？这是我尝试过的： http://jsfiddle.net/a3Cj2/

$( ".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');     
    }
});

- Jon Hargett

Answer 1

最简单的方法是使用cursorAt选项，将'left'和'top'设置为缩小的helper尺寸的一半。

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

Updated fiddle

- Beetroot-Beetroot

---

这个方法更简单，而且很有效。但是，它没有完全实现将移动动画到中心的效果。 - Mike Marcacci

@MikeMarcacci，你说得对，这里的缩小效果不如你的答案那么吸引人，但最终结果是相同的。对我来说，这种方法的最大优点是助手不会留下可能在某些情况下成为问题的边距。 - Beetroot-Beetroot

是的，我同意你的观点。如果对象一旦被丢弃就被销毁，那么使用边距是可以的，但如果它在此之后要保留一段时间，那么你的解决方案是一个更好的想法。 - Mike Marcacci

谢谢大家，两种解决方案对我都有效。但是，当你把东西放在正方形里时，你确实会得到一个放置事件吗？即使我增加了放置目标的大小，我仍然不能始终获得放置事件。我正在使用Chrome v.26。公平地说，我的原始fiddle也没有得到事件，所以不是你们的添加引起的。 - Jon Hargett

我在 droppable 配置中发现了“tolerance”选项。我将其设置为指针，效果非常好。虽然两种方法都很好，但我会将更简单的解决方案标记为答案，因为它对我有效。我会给两个方法点赞。 - Jon Hargett

Answer 2

哇，这比我想象的要费更多的功夫！以下是修复方法：

$( ".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');     
    }
});

您需要考虑事件位置并根据两个可拖动元素中心的差异使其居中。 请在这里查看示例。

- Mike Marcacci

---

请注意，我保留了宽度和高度，以便您了解正在发生的情况，但(300-80)/2 - (300/2 - event.offsetX)可以简化为event.offsetX-40。 - Mike Marcacci