Ich habe ein ziehbares und absetzbares Layout. Ich erstelle ein ziehbares Objekt, wenn ich es aus einer Typahead-Suche hinzufüge. Ich habe jedoch einige Probleme mit der Platzierung. Die Größe des ziehbaren Objekts ist viel größer als der Container, in den es fallen gelassen werden sollte. Dies führte zu einigen Problemen beim Ablegen.Größe des ziehbaren Elements beim Start des Ziehens ändern

Ich möchte das Element auf Größe ändern, es ist die aktuelle Größe beim Ziehen Start. Wie mache ich das? Das Problem ist in der Geige nicht vorhanden, es sei denn, die width von .semester wird auf ungefähr 30% gesetzt.

Hier ist der JSFiddle

EDIT:

Nach @ user619081-Lösung implementiert haben, ich mache das nur, wenn das Objekt sehr groß passieren wollte. Ich habe eine globale Variable var tempWidth und den Code auf die folgende Aktualisierung:

start: function(event, ui) { 
    if(tempWidth < $(this).width()){ 
     $(this).addClass("moveable"); 
    } 
    tempWidth = $(this).width(); 
}, 
stop: function(event, ui) { 
    $(this).removeClass("moveable"); 
}

Quelle

2016-05-12 Zeliax

Sie müssen sich in die Drag-Start- und Drag-Stop-Ereignisse des ziehbaren Widgets einklinken.

Lesen Sie mehr über sie hier:

Drag Start (Start) - http://api.jqueryui.com/draggable/#event-start
Drag Stop (Stopp) - http://api.jqueryui.com/draggable/#event-stop

Nun, da Sie wissen, wie sie zu benutzen Sie können etwas tun:

$(".courseBox").draggable({ 
    revert: "invalid", 
    containment: "document", 
    cursor: "move", 
    start: function(event, ui) { 
    $(ui.helper).css('width', "50%"); 
    }, 
    stop: function(event, ui) { 
    $(ui.helper).css('width', "100%"); 
    } 
});

Bitte beachten Sie, dass ui.helper den Verweis auf das Element enthält, das Sie ziehen, weshalb Sie es im Code sehen.

Hier ist ein working fiddle auch.

Quelle

2016-05-12 10:23:41 Peter

Prost das war was ich gesucht habe! – Zeliax

Wie würde ich vorgehen, wenn ich überprüfen möchte, wie groß die aktuelle Größe des Elements ist? Und deshalb ändern Sie es nur, wenn es groß ist und nicht, wenn es vom kleinen Behälter zum großen bewegt wird, bevor es auf den großen fallen gelassen wird? – Zeliax

Ihre Frage ist sehr vage, ich brauche mehr Details darüber, was Sie erreichen möchten. Das ziehbare Element weiß nicht, wo Sie es verschieben werden. Möglicherweise verfügen Sie über drei Drop-Zones, von denen jede eine andere Größe haben kann. Es gibt keinen universellen Ansatz, bei dem wir wissen, auf welche genaue Größe das gezogene Element nicht reduziert werden sollte. Wir müssen das Szenario in irgendeiner Weise einschränken.Was Sie tun können, ist zum Beispiel nur zu verkleinern, wenn es vom Großen zum Kleinen gezogen wird, und es nicht zu verkleinern, wenn es in die entgegengesetzte Richtung gezogen wird, vom Kleinen zum Großen. – Peter

Sie in onDragStart aussehen sollte und ondragstop Ereignisse. Sehen Sie in ev.originalEvent.dataTransfer nach, wenn Sie Informationen über den Originalzustand des DOM-Elements, z. B. die ursprüngliche Breite oder etwas anderes, weitergeben müssen.

$(".courseBox").on('dragstart', function(ev) { 
    $(this).css('width', '50%'); 
}); 

$(".courseBox").on('dragstop', function(ev) { 
    $(this).css('width', '100%'); 
});

Quelle

2016-05-12 10:18:15

Wie würde ich prüfen, was die ursprüngliche Größe des Elements ist? Ich habe versucht, auf Google zu suchen, aber ohne Erfolg. – Zeliax

I have updated your fiddle just check it. 
It is working with targeted width size

https://jsfiddle.net/8g2oqp0h/37/

Quelle

2016-05-12 11:21:21 user619081

Das ist cool. Ich weiß nicht, warum ich selbst nicht daran gedacht habe. Ich bemerkte jedoch, dass es nur funktionierte, wenn ich es zum ersten Mal herunterzog. Ich habe nicht gearbeitet, wenn ich es hin und her schleppte. Ansonsten würde ich deine Antwort als richtige Antwort markieren, – Zeliax

Zumindest funktionierte das auf der Geige. Nach der Implementierung selbst funktioniert es gut – Zeliax

Größe des ziehbaren Elements beim Start des Ziehens ändern

EDIT:

Antwort

Verwandte Themen