jquery - 如何使用较小的克隆制作 JQuery Draggable？

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

Answer 1

到目前为止，最简单的方法是使用将cursorAt“left”和“top”设置为缩小助手尺寸一半的选项。

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

更新的小提琴

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

您需要考虑事件位置并根据两个大小的可拖动对象的中心之间的差异将其居中。

在这里看小提琴。