web-dev-qa-db-fra.com

Jquery déplaçable ET redimensionnable

function makeResourceDrag(arrIndexID) {

    $('#imgA' + arrIndexID).resizable();

    $('#imgA' + arrIndexID).draggable({
        start: function(event, ui) {
            isDraggingMedia = true;
        },
        stop: function(event, ui) {
            isDraggingMedia = false;

            // Set new x and y
            resourceData[arrIndexID][4] = Math.round($('#imgA' + arrIndexID).position().left / currentScale);
            resourceData[arrIndexID][5] = Math.round($('#imgA' + arrIndexID).position().top / currentScale);

        }
    });

}

Cela fonctionne bien si la ligne redimensionnable est supprimée, mais je veux que ces images soient glissables et redimensionnables, j'obtiens des comportements drôles si j'essaie de faire en sorte que le même élément ait les deux attributs, quelqu'un connaît-il un moyen de faire fonctionner cela?

Merci!

jqueryjquery-ui-resizablejquery-ui-draggable
22
Tom Gullen

On dirait que c'est parce que vous le faites sur un <img>, que jqueryui encapsule dans un <div>, puis le composant déplaçable de l'image se produit dans l'habillage <div>.

Essayez d'envelopper le <img> dans un <div> (qui, s'il est de style display:inline-block, "étreindra" la taille de l'image dans les deux axes x et y), faites le <div> déplaçable (et donc le <img> le sera aussi), et faites le <img> redimensionnable (et puisque le div étreint l'image, tout repose bien).

Exemple de travail: http://jsfiddle.net/vrUgs/2/

43
davin

Redimensionnable et déplaçable causait toutes sortes de problèmes de décalage DOM pour moi. Il y a bogue déposé pour ce comportement ; le correctif temporaire consiste à appliquer le CSS suivant, qui a fonctionné pour moi:

.element {
  position: absolute !important;
}
9
subelsky

J'étais curieux, voici du code de travail qui est déplaçable et redimensionnable. jQuery:

jQuery(document).ready(function(event){
   jQuery(".img").draggable().find("img").resizable();
});

html:

<div class="img">
  <img alt="" src="images/hard-disk-fingerprint.jpg"/>
</div>

d'autres choses que j'ai remarquées, à prendre ou à laisser, car je ne connais pas le travail impliqué dans le changement de votre JS.

tout d'abord, tous les "draggables" qui sont déplacés obtiennent une classe de ".ui-draggable-dragging" que vous pouvez potentiellement utiliser pour votre logique "isDraggingMedia".

deuxièmement, pour obtenir la position actuelle avec précision, je recommande d'utiliser le ui.offset {top: "", left: ""}, possible modifié avec le ui.position {top: "", left: ""} décrivant la position de l'objet "d'assistance" par rapport à l'élément que vous faites glisser.

 $('#div holding imgA+arrindexid').draggable({stop:function(event, ui){
//isDraggingMedia = true;  
//replace this with a $().is(ui-draggable-dragging) check if possible where it matters in //your other javascript.
                  // Set new x and y
                    resourceData[arrIndexID][4] = Math.round(ui.offset.left / currentScale);
                    resourceData[arrIndexID][5] = Math.round(ui.offset.top / currentScale);
    }}).find('img').resizable();
4
DefyGravity

Par cette question: Objet redimensionnable et déplaçable dans jquery. Possible? si vous incluez simplement jquery-ui.css, cela fonctionnera. Cela a résolu mon problème lorsqu'aucun de ces problèmes ne s'est produit. Mon code est simple:

$(element).resizable().draggable();

C'était déplaçable mais pas redimensionnable. Rien d'autre n'a fonctionné. L'ajout du CSS a permis de redimensionner sans divs ou code supplémentaires.

3
Devil's Advocate

Si vous appliquez d'abord le redimensionnable, vous pouvez ensuite appliquer le draggable au parent de l'img; qui est le nouveau div créé en appliquant redimensionnable.

chartImg.resizable({ animate: true,
            ghost: true,
            handles: 'n,s,e,w,ne,se,nw,sw',
            start: function (event, ui) { startResize(event, ui); },
            resize: function (event, ui) { monitorResize(event, ui); },
            stop: function (event, ui) { stopResize(event, ui); }
        }).parent().draggable({ containment: $(".chartPane") });
1
TrailTrackers

Le code responsable de cela était une solution de contournement pour autre chose: lien Github qui pointe vers bug 1749 .

// bugfix for http://dev.jquery.com/ticket/1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
    el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
}

Le correctif lui-même existe depuis le début des temps: Lien fixe de bug Github pour Jquery

// bugfix #1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {

    // sOffset decides if document scrollOffset will be added to the top/left of the resizable element
    var sOffset = $.browser.msie && !o.containment && (/absolute/).test(el.css('position')) && !(/relative/).test(el.parent().css('position'));
    var dscrollt = sOffset ? o.documentScroll.top : 0, dscrolll = sOffset ? o.documentScroll.left : 0;

    el.css({ position: 'absolute', top: (iniPos.top + dscrollt), left: (iniPos.left + dscrolll) });
}

Et a été effectivement mis à jour une seule fois, il y a 7 ans: Lien mis à jour

// bugfix #1749
        // bugfix for http://dev.jquery.com/ticket/1749
        if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
            // sOffset decides if document scrollOffset will be added to the top/left of the resizable element
            var sOffset = $.browser.msie && !o.containment && (/absolute/).test(el.css('position')) && !(/relative/).test(el.parent().css('position'));
            var dscrollt = sOffset ? this.documentScroll.top : 0, dscrolll = sOffset ? this.documentScroll.left : 0;

            el.css({ position: 'absolute', top: (iniPos.top + dscrollt), left: (iniPos.left + dscrolll) });
            el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
        }

Référence: lien jquery

0
rhitz