Sortierbar mit / auswählbar Text

Question

Ist es möglich, die Lage sein, sortierbare Elemente zu haben, aber immer noch Benutzer erlauben, den Text innerhalb der Elemente zu kopieren / einfügen?

<div class="sortable">
   <div class="pseudo-sortable">Foo</div>
   <div class="pseudo-sortable">Bar</div>
   <div>other stuff that i don't care if a user 
        can't copy (maybe images or buttoms)</div>
</div>

Ich kann leicht tun:

$('.sortable').sortable({cancel: '.pseudo-sortable'});

Dies ermöglicht es mir den Text im Browser auswählen und kopieren / einfügen, wenn ich will. Aber auch das macht es so, dass die Person kann nicht per Drag / Drop. Deshalb denke ich, was würde Ich mag es, mit dem Aufhebungs zu starten, aber wenn die Maus einen bestimmten Abstand außerhalb des Behälters geht, dann wird das pseudo-sortables nicht mehr abgebrochen. Ist das sinnvoll?

Ist dies nicht möglich, meine letzte Möglichkeit ist, wäre ein Trigger anzuwenden, die Behälter schaltet zwischen sortierbar und nicht sortierbar, so dass sie den Text auswählen können, aber ich würde es vorziehen, ui Klicks zu minimieren.

Answer 1

Was ist mit Ihrem Text in einem <span> setzen?

HTML

<ul id="sortable">
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
    <li><span>Item 4</span></li>
    <li><span>Item 5</span></li>
    <li><span>Item 6</span></li>
    <li><span>Item 7</span></li>
</ul>

jQuery

$("#sortable").sortable({
    revert: true,
    cancel: "#sortable li span"
});

Versuchen Sie es hier: http://jsfiddle.net/6uXx8/

Answer 2

Versuchen Sie, einen Griff hinzufügen. Die Idee ist, dass Sie nur vom Griff beginnen können das Element ziehen, die zum Beispiel sein könnten, ein Symbol innerhalb des Elements.