Se qualcuno può aiutarmi a capire come rendere gli elementi trascinabili contenuti in un div che modifica la scala in base alle dimensioni della finestra, apprezzerei davvero qualsiasi orientamento.valori di array di contenimento trascinabili jquery per il contenitore in scala
Se lo faccio:
element.draggable({
cursor: "move",
containment: '#container'
});
Quello che accadrà è che mi dà il contenimento per la dimensione regolare del contenitore. Quindi, se ho uno transform: scale(1.5)
, ci sarà spazio nel contenitore che l'elemento trascinabile non può percorrere.
Ho anche provato containment: 'parent'
ma questo è molto pericoloso.
EDIT
ho scoperto come ottenere il contenimento superiore e sinistro, ma io non riesco a capire come ottenere il giusto e in basso.
var containmentArea = $("#container");
containment: [containmentArea.offset().left, containmentArea.offset().top, ???, ???]
Ho provato larghezza e altezza da containmentArea[0].getBoundingClientRect()
ma che non sembra essere la mossa giusta sia.
Here is a jsfiddle of some example code.
Non avendo guardato in dettaglio la funzione di dragFix (forse, si poteva trattenere i valori lì invece di utilizzare contenimento), i limiti stessi non sembrano lavoro quando l'ho provato, ma avevo bisogno delle dimensioni dell'elemento trascinato da sottrarre: 'var bounds = container.getBoundingClientRect(); var dragrect = $ ('. Draggable') [0] .getBoundingClientRect() .... containment: [bounds.x, bounds.y, bounds.right - dragrect.width, bounds.bottom - dragrect.height] ' (fiddle: http://jsfiddle.net/z0gqy9w2/4/) –
@ Me.Name Hmm, la parte destra e quella inferiore sembrano funzionare ma ora la parte superiore e quella sinistra non funzionano. La modifica del dragfix potrebbe essere una possibile soluzione. Pensare bene. – bryan
Oops, usato xey invece di sinistra e destra, xey funzionano in firefox quindi non ci sono problemi lì. Funziona anche in Chrome (non ho testato cioè): 'contenimento: [bounds.left, bounds.top, bounds.right - dragrect.width, bounds.bottom - dragrect.height]' (http: // jsfiddle. net/z0gqy9w2/5 /) (Ancora, fare il lavoro in Dragfix sembra più generico, potrebbe dare una sbirciatina a quello più avanti) –