Geek asks and answers

How to create jQuery draggable with a smaller clone?

I have a large element that appears on the screen, and I would like it to fall on a smaller target. Therefore, I want to reduce the size of the dragged clone so that it matches the size of the target. I thought it would be great to revive this. I can't seem to get the smaller clone to center around the cursor while dragging and dropping. Any ideas? Here is what I tried: 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');     
    }
});
+5
source share
2 answers

The easiest approach is to use the parameter cursorAtwith "left" and "top" set to half the size of the shortened helper.

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

Updated violin

+8

, , ! :

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

.

.

+2

More articles:


All Articles