Come si crea un JQuery Draggable con un clone più piccolo?

Ho un grande elemento che viene visualizzato sullo schermo che vorrei essere in grado di rilasciare su un obiettivo di rilascio più piccolo. Pertanto, voglio ridurre la dimensione del clone trascinabile in modo che corrisponda alla dimensione del target di rilascio. Ho pensato che sarebbe stato bello animare questo. Tuttavia, non riesco a far centrare il cursore più piccolo attorno al cursore mentre lo trascino. Qualche idea? Ecco una cosa ho provato: http://jsfiddle.net/a3Cj2/Come si crea un JQuery Draggable con un clone più piccolo?

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

fonte

2013-04-29 Jon Hargett

L'approccio di gran lunga più semplice consiste nell'utilizzare l'opzione cursorAt con "left" e "top" impostati a metà delle dimensioni dell'helper shrunken.

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

Updated fiddle

fonte

2013-04-29 22:15:34

Questo è molto più semplice, e fa il trucco. Tuttavia, non ha lo stesso effetto di animare il movimento verso il centro. –

@MikeMarcacci, hai ragione, l'effetto di restringimento qui è meno attraente che nella tua risposta, anche se il risultato nett è lo stesso. Per me, il grande vantaggio di questo approccio è che l'helper non finisce con margini che potrebbero essere un problema più avanti in alcune circostanze. –

Sì, sono d'accordo con te su questo. Se l'oggetto viene distrutto una volta che viene eliminato, l'utilizzo dei margini va bene, ma se si intende dire in giro per qualsiasi momento dopo, la soluzione è un'idea molto migliore. –

Wow, che ha avuto più lavoro di quanto pensassi! Ecco la correzione:

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

È necessario tenere conto della posizione di evento e centrarlo in base alla differenza tra i centri di entrambe le draggables dimensioni.

See fiddle here.

fonte

2013-04-29 21:28:48

Nota anche che ho mantenuto le larghezze e altezze in là così si poteva vedere quello che sta succedendo, ma '(300-80)/2 - (300/2 - event.offsetX) 'potrebbe davvero essere semplificato a' event.offsetX-40' –

Come si crea un JQuery Draggable con un clone più piccolo?

risposta

Problemi correlati