valori di array di contenimento trascinabili jquery per il contenitore in scala

Question

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.

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.

Answer 1

Una versione con reset delle coordinate in caso di trascinamento (da quando erano essendo già ricalcolato per le trasformazioni di scala), senza utilizzare il contenimento:

var percent = 1, containmentArea = $("#container"); 

function dragFix(event, ui) { 
    var contWidth = containmentArea.width(), contHeight = containmentArea.height(); 
    ui.position.left = Math.max(0, Math.min(ui.position.left/percent , contWidth - ui.helper.width())); 
    ui.position.top = Math.max(0, Math.min(ui.position.top/percent, contHeight- ui.helper.height())); 
} 

$(".draggable").draggable({ 
    cursor: "move", 
    drag: dragFix, 
}); 

//scaling here (where the percent variable is set too) 

Fiddle

Nell'esempio la larghezza e l'altezza del contenitore si ottengono all'interno del dragevent, è possibile anche memorizzarle durante il ridimensionamento per prestazioni migliori. Avendoli calcolati all'interno dell'evento, funzionano ancora dopo la ridimensionamento, anche se la variabile percentuale deve essere ancora impostata. Per essere veramente generico, potrebbe essere ottenuto anche all'interno dell'evento (e invece di un contenitore fisso, ui.helper.parent() potrebbe essere utilizzato) Poiché l'offset all'interno del dragevent è (0,0) relativo al contenitore (almeno è per l'impostazione corrente), si è permesso di semplificare originalleft + (position - originalposition)/percent a position/percent L'offset di avvio non sembrava per essere più necessario, quindi lasciatelo fuori dal violino, ma può essere riaggiunto se necessario.

Answer 2

Date un'occhiata a questo:

http://jsfiddle.net/z0gqy9w2/3/

Il codice modificato è la seguente:

// Matrix regex to take the scale value property of $('#container') element  
    var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/, 
    matches = $('#container').css('transform').match(matrixRegex); 
    // Matches have this value : ["matrix(1.5, 0, 0, 1.5, 0, 0)", "1.5", "1.5"] , so we need matches[1] value : 
    var scaleValue = matches[1]; 
    $(".draggable").draggable({ 
     cursor: "move", 
     start: startFix, 
     drag: dragFix, 
     containment: [containmentArea.offset().left, containmentArea.offset().top, 
         ((containmentArea.offset().left + (containmentArea.width() * scaleValue)) - ($(".draggable").width() * scaleValue)) , 
         ((containmentArea.offset().top + (containmentArea.height() * scaleValue)) - ($(".draggable").height() * scaleValue)) ] 

    }); 

Come vedete, qui è il trucco :

La posizione massima destra sarà: L'offset del contenitore principale a sinistra + la larghezza reale del contenitore (con scala) - l'articolo larghezza reale (per lasciarlo all'interno del contenitore).

(Suggerimento: Essere liberi di modificare il valore var "cento", come si desidera anche vedere i risultati)

regex ref

Answer 3

Ecco la mia soluzione:

var _zoom = 1.2, 
    $element = $('.draggable-element'), 
    $container = $('#container'); 

var containmentW, 
    containmentH, 
    objW, 
    objH; 

$element.draggable({ 

    start: function(evt, ui) { 
     ui.position.left = 0; 
     ui.position.top = 0; 

     containmentW = $container.width() * _zoom; 
     containmentH = $container.height() * _zoom; 
     objW = $(this).outerWidth() * _zoom; 
     objH = $(this).outerHeight() * _zoom; 

    }, 

    drag: function(evt, ui) { 

     var boundReached = false, 

      changeLeft = ui.position.left - ui.originalPosition.left, 
      newLeft = ui.originalPosition.left + changeLeft/_zoom, 

      changeTop = ui.position.top - ui.originalPosition.top, 
      newTop = ui.originalPosition.top + changeTop/_zoom; 


     // right bound check 
     if(ui.position.left > containmentW - objW) { 
      newLeft = (containmentW - objW)/_zoom; 
      boundReached = true; 
     } 

     // left bound check 
     if(newLeft < 0) { 
      newLeft = 0; 
      boundReached = true; 
     } 

     // bottom bound check 
     if(ui.position.top > containmentH - objH) { 
      newTop = (containmentH - objH)/_zoom; 
      boundReached = true; 
     } 

     // top bound check 
     if(newTop < 0) { 
      newTop = 0; 
      boundReached = true; 
     } 

     // fix position 
     ui.position.left = newLeft; 
     ui.position.top = newTop; 

     // inside bounds 
     if(!boundReached) { 

      // do stuff when element is dragged inside bounds 

     } 

    } 
}); 

Link to fiddle