Jquery ui - sortierbar: Ziehen Sie innerhalb des sortierbaren Elements nach Symbol 'Handle'

75

Ich habe jquery ui sortables, die gut funktionieren, aber meine sortierbaren Elemente enthalten andere interaktive Elemente. Um ein versehentliches Sortieren bei der Interaktion mit den Elementen innerhalb der sortierbaren Divs zu verhindern, möchte ich die Ziehbewegung für die sortierbaren Elemente irgendwie nur dann ausführen, wenn ein bestimmtes Element innerhalb der sortierbaren Elemente gezogen wird, z. B. ein möglicherweise verschobenes Symbol zum Verschieben in der oberen linken Ecke jeder sortierbaren. Ist dies mit generischem JQI möglich oder müsste ich meinen eigenen Hook schreiben?

jquery-ui user-interface interface web jquery-ui-sortable Rimer
quelle

Antworten:

158

Die Option Griff des Plug - ins können Sie festlegen , dass das Element ist, das die Art initiieren kann. Sie können einen Selektor oder ein Element bereitstellen.

Wenn Sie dieses HTML haben, mit dem .handler, um das Handle zu sein, um die Sortierung zu starten:

<ul class="sortable">
    <li>
        <span class="handle"></span>
        My element
    </li>
</ul>

Wenden Sie die Option folgendermaßen an:

$( ".sortable" ).sortable({ handle: '.handle' });

Sie können Ihr Griffelement beliebig gestalten.

Didier Ghys
quelle
4
OMG kann nicht glauben, dass ich dies nicht in der Dokumentation für sortierbar gesehen habe, aber dort ist es richtig im Abschnitt OPTIONEN ...
Rimer
Hmm scheint wie in IE7 (Quirks-Modus in IE9), es funktioniert nicht :(. Das Handle funktioniert nicht, und da es nur auf das Handle beschränkt war, ist die Sortierung jetzt in IE7 deaktiviert :(. Funktioniert in FF, IE9, Chrome ...
Rimer
Dies ist mit jquery 1.7 und jq ui 1.8
Rimer
Ich bin, wenn ich mich richtig erinnere, einmal auf ein ähnliches Problem gestoßen. Ich habe es geschafft, einen Workaround-Presenter in Bug Ticket anzuwenden, aber ich denke, dass dies jetzt in der neuesten jquery ui 1.8.16 behoben ist. Vielleicht hängt es nicht zusammen, aber diese Probleme sind schwierig aufzuspüren.
Didier Ghys
2
@RohitSengar. handleEigenschaft akzeptiert einen Selektor. Ich denke, Sie könnten so etwas schreiben, wie { handle: '.handle1, .handle2' }Sie es für die Auswahl mehrerer Elemente tun würden. Versuche es.
Didier Ghys