jquery ui draggable ändert die Breite automatisch

Ich folge durch jquery ui docs, um die divs ziehbar und sortierbar zu machen. Und es funktioniert zum Ziehen und Sortieren. Aber wenn ich ein div von ziehbar zu sortierbar entferne, ändert sich die Breite der ziehbaren und behält nicht die Breite, die es sein soll. Hierjquery ui draggable ändert die Breite automatisch

ist die demo

js:

$(function() { 
    $('#grid-main_content').sortable({ 
     revert:true 
    }); 

    $('#block-list .block').draggable({ 
     connectToSortable: '#grid-main_content', 
     helper: 'clone', 
     revert:'invalid' 
    }); 
})

Und wenn ich das Element inspizieren, die ich der sortierbare gezogen, kann ich sehen, dass ein Inline-Stil auf den ziehbar Block mit einer Breite gegeben ist (von jquery).

Wie kann ich den Stil beibehalten, den der Block bereits hat? Vielen Dank.

Quelle

2015-08-23 Kakar

Also, was Sie brauchen, halten Sie die Breite gleich für beide – Vijay

@Vijay brauche ich den Block, der ich auf das sortierbare gezogen, um die Breite der gleichen Größe anderer Blöcke in '# grid-main_container' zu haben. – Kakar

Sie haben eine andere CSS-Datei. – Vijay

können Sie draggables' verwenden start event, spezifischen Stil des Helfer zu halten

$('#block-list .block').draggable({ 
    connectToSortable: '#grid-main_content', 
    helper : 'clone', 
    revert : 'invalid', 
    start : function(event, ui){ 
     $(ui.helper).addClass("ui-helper"); 
    } 
});

CSS:

.ui-helper { 
    width: 100% !important; 
}

Demo

Quelle

2015-08-23 08:59:47

Ja. Es funktioniert. Aber es bedeckt nur die gesamte Breite des Browsers, wenn ich es ziehe. Er behält jedoch die Breite innerhalb von # # grid-main_container bei. Ist es jedoch möglich, die Breite des ziehbaren Blocks beizubehalten, auch wenn er gezogen wird? Wie die mit deinem Kommentar mit jquery ui 1.10.4. – Kakar

In der neuesten jQuery-Benutzeroberfläche können Sie '.ui-Ziehen-Ziehen'verwenden, sodass kein benutzerdefiniertes JavaScript mehr benötigt wird. – Dunc

Ich erstelle gerade eine Codepen demo

Schauen Sie sich dies an und kopieren Sie die Codes, wenn es funktioniert.

, wenn Sie den unteren Teil des div wieder auf seine ursprüngliche Größe benötigen, bitte ändern

#grid-main_content { 
width:80%;

Quelle

2015-08-23 09:33:08 Vijay

Sie verwenden den gleichen Code wie @Artur – Kakar

Ja, ich habe auch diesen Code + die Breite hinzugefügt, aber die Breite ist nicht klar in Artur-Code. – Vijay

Das ist für mich gearbeitet. Einfach einstellen auf die Breite des ziehbar Element

$('.selector').draggable({ 
    helper: 'clone', 
    start: function(event, ui){ 
     $(ui.helper).css('width', `${ $(event.target).width() }px`); 
    } 
})

, die Art und Weise Sie fügen Sie nicht die CSS

Quelle

2017-02-21 20:02:41

jquery ui draggable ändert die Breite automatisch

Antwort

Verwandte Themen