Jquery Draggable et Resizable

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 très bien si la ligne redimensionnable est retirée, mais je veux que ces images soient modulables et redimensionnables, je reçois des comportements drôles si j'essaie de faire le même élément ont les deux attributs, quelqu'un sait-il un moyen de faire ce travail?

Merci!

22
demandé sur Tom Gullen 2011-02-09 20:55:05

6 réponses

semble comme c'est parce que vous le faites sur un <img> , que jqueryui enveloppe dans un <div> , et puis le composant draggable de l'image se produit dans l'emballage <div> .

tentez d'envelopper le <img> dans un <div> (qui, s'il est appelé display:inline-block , "enlacera" la taille de l'image dans les axes x et y), faire le <div> draggable (et donc le <img> inclus sera ainsi), et faire le <img> redimensionnable (et puisque le div étreint l'image, tout s'assoit bien).

exemple pratique: http://jsfiddle.net/vrUgs/2/

43
répondu davin 2011-02-09 18:47:11

Resizable et draggable me causaient toutes sortes de problèmes de changement de DOM. Il y a un bug déposé pour ce comportement ; le correctif temporaire est d'appliquer le CSS suivant, qui a fonctionné pour moi: 

.element {
  position: absolute !important;
}
9
répondu subelsky 2013-01-02 17:04:07

j'étais curieux, voici le 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é, prendre ou laisser, car je ne sais pas le travail impliqué dans le changement de vos JS.

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

en second lieu, à obtenir la position actuelle avec précision,je recommande d'utiliser l'interface utilisateur.décalage{top:"",à gauche:""}, possible modifiée avec l'interface utilisateur.position{top:"", left:""} décrivant la position de l'objet 'helper' par rapport à l'objet traîné. 

 $('#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
répondu DefyGravity 2011-02-09 19:15:13

Par cette question: Redimensionnable, déplaçable objet jquery. Possible? si vous incluez simplement jquery-ui.css il va travailler. Il a résolu mon problème quand aucun de ces a fait. Mon code est simple: 

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

c'était extensible mais pas redimensionnable. Rien d'autre n'a fonctionné. L'ajout du CSS permet de redimensionner sans divs ni code supplémentaires.

3
répondu Scott Beeson 2017-05-23 10:30:52

si vous appliquez le resizable en premier, vous pouvez alors appliquer le draggable au parent de l'img; qui est le nouveau div créé par application resizable. 

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
répondu TrailTrackers 2012-08-07 15:11:50

le code responsable de cela était une solution de contournement pour autre chose: lien Github qui pointent 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: Github Bug Lien fixe 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 juste mis à jour à la fois, il y a 7 ans: mise à Jour du Lien 

// 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 });
        }

la Référence : jquery lien

0
répondu Rohit Totala 2015-12-30 11:33:37