Jquery Draggable AND Resizable

Question

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

        }
    });

}

Dies funktioniert gut, wenn die größenveränderbare Zeile herausgenommen wird, aber ich möchte, dass diese Bilder ziehbar und größenveränderbar sind, erhalte ich lustige Verhaltensweisen, wenn ich versuche und machen das gleiche Element haben beide Attribute, weiß jemand einen Weg, um diese Arbeit zu machen?

Danke!

Answer 1

Sieht so aus, als ob es daran liegt, dass Sie es auf einem <img> , die jqueryui in eine <div> und dann wird die verschiebbare Komponente des Bildes innerhalb der Umhüllung <div> .

Versuchen Sie, die <img> において <div> (die, wenn sie gestylt sind display:inline-block wird die Größe des Bildes in der x- und y-Achse "umarmen"), machen Sie die <div> ziehbar (und damit die beigefügte <img> werden), und machen Sie die <img> (und da das Div das Bild umarmt, sitzt es gut).

Arbeitsbeispiel: http://jsfiddle.net/vrUgs/2/

Answer 2

Resizable und Draggable verursachten bei mir alle möglichen DOM-Verschiebungsprobleme. Es gibt eine Fehler für dieses Verhalten gemeldet Die vorübergehende Lösung besteht darin, das folgende CSS anzuwenden, was bei mir funktioniert hat:

.element {
  position: absolute !important;
}

Answer 3

Ich war neugierig, hier ist funktionierender Code, der verschiebbar und in der Größe veränderbar ist. 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>

andere Dinge, die ich bemerkt habe, nehmen oder lassen Sie es, wie ich nicht wissen, die Arbeit bei der Änderung Ihrer JS beteiligt.

Zunächst erhalten alle "Draggables", die gezogen werden, die Klasse ".ui-draggable-dragging", die Sie für Ihre "isDraggingMedia"-Logik verwenden können.

Zweitens, um die aktuelle Position genau zu bestimmen, empfehle ich die Verwendung von ui.offset{top:"",left:""}, möglicherweise in Kombination mit ui.position{top:"",left:""}, das die Position des Hilfsobjekts relativ zum gezogenen Element beschreibt.

 $('#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();

Answer 4

Vergewissern Sie sich jquery-ui.css in Ihrem Projekt referenziert wird!

Zu dieser Frage: Veränderbares, verschiebbares Objekt in Jquery. Möglich? wenn Sie einfach jquery-ui.css einbinden, wird es funktionieren. Es löste mein Problem, als keine der anderen Dateien funktionierte. Mein Code ist einfach:

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

Diese war verschiebbar, aber nicht in der Größe veränderbar. Nichts anderes funktionierte. Das Hinzufügen des CSS ermöglichte die Größenänderung ohne zusätzliche Divs oder Code.

Answer 5

Wenn Sie zuerst die Größenanpassung anwenden, können Sie dann die Verschiebbarkeit auf das übergeordnete Element des Bildes anwenden, d. h. auf das neue Div, das durch die Anwendung der Größenanpassung erstellt wurde.

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