JavaScript Drag & Select-Funktionalität richtig gemacht

Bin ich zu schreiben versucht, eine drag & wählen Sie die Funktionen mithilfe der HTML & JavaScript. Damit meine ich, dass es eine Menge von Objekten mit beliebigen absoluten Positionen. Ich möchte in der Lage sein, ziehen Sie den cursor über den Bereich, wo Sie angelegt sind. Betrachten Sie es als ein RTS-Strategie (Auswahl der Einheiten) oder alternativ eine Vektor-Grafik-editor (auswählen von Objekten zum bewegen und Bearbeiten).

Erste ich bin mir bewusst, der Dinge, die kommen bis in die ersten paar Seiten von Google & SO. Also ich bin keineswegs Fragen, googeln, diese Dinge für mich und postest hier ein paar zufällige links.

Meisten Lösungen, die ich finden konnte, sind in irgendeiner Weise fehlerhaft. Das Hauptproblem ist die Unterdrückung der tatsächlichen text-Auswahl, die scheint die Art gegen die Natur eines web-Browsers. Einige der code-snippets verursachen Auswahl funkeln, das finde ich sehr ärgerlich. Einige don ' T Verhalten sich gut in allen gängigen Browsern.

Frage ich ja nach Empfehlungen des Codes/- Bibliotheken, die Sie tatsächlich verwendet, oder gesehen erfolgreich eingesetzt.

Die zweite Sache ist, dass ich möchte, um tatsächlich zu verstehen, die Interna von JavaScript hinter unterdrücken Auswahl. Wie sollte es getan werden, in der Theorie. Ist es nicht hackish Weg?

Die nächsten, die ich finden konnte ist dieses:
http://view.jquery.com/tags/ui/1.5b2/demos/ui.selectable.html

Aber es scheint eng gekoppelt werden mit jQuery UI, die wiederum erfordert jQuery 1.3.x wobei ich freute mich wirklich auf die Verwendung von jQuery 1.5

InformationsquelleAutor julkiewicz | 2011-05-01

  1. 22

    Sorry für mein Englisch. Ich bin mit dieser Bibliothek für drag/drop und es ist toll. Nicht sicher, ob es ist, was Sie brauchen, aber es könnte helfen:

    http://threedubmedia.com/code/event/drop/demo/selection

    http://threedubmedia.com/code/event/drag

    http://threedubmedia.com/code/event/drop

    Das sieht wirklich schön aus. Welche web-Browser haben Sie es versucht? AUCH: ist es mit HTML5 oder wird es mit HTML4?
    Naja, ich fand diesen in der Bibliothek, wenn ich mit einem Projekt begonnen, für ein interaktives Schach-Website, dass ich arbeite immer noch an. Also, es ist das erste mal, dass ich bin mit Sie und es nicht in einer Produktionsstätte, aber in Monaten, in denen ich nie einen bug oder eine Fehlfunktion. Ich bin mit FF3.6 als Haupt-browser-Entwicklung, die ich regelmäßig testen auf IE und sporadisch in Chrom. Ich bin mit HTML5 aber ich bin mir sicher, dass es arbeiten muss, 4.
    Ok, vielen Dank es sieht wirklich ordentlich. Auch docs sind anständig. Ich werde auf jeden Fall schauen.
    Sie sind herzlich willkommen. Ja, documentacion und Proben sind sehr gut gemacht, das macht mich denke, es sollte ein gutes Produkt.

    InformationsquelleAutor morgar

  2. 1

    Das Hauptproblem ist die Unterdrückung der tatsächlichen text-Auswahl, die scheint die Art gegen die Natur eines web-Browsers.

    Die Funktion die du suchst ist e.preventDefault();

    $("#inputform").mousedown(function(e){
    e.preventDefault();
    //console.log('mousedown');
}).mouseup(function(e){
    e.preventDefault();
    //console.log('mouseup');
});

    Diese nur löst das problem der Textauswahl. Ich kann sehen, verschiedene drag-wählen Sie js scritps über das web, aber irgendwie bin ich nicht in der Lage, Sie zu machen Arbeit.

    InformationsquelleAutor Agniva De Sarker

  3. 1

    Bin ich mir nicht 100% sicher, wenn ich Ihre Frage richtig. Aber ich habe zwei plugins, die sich mit den Fällen, die Sie beschreiben, denke ich. Sie brauchen keine Abhängigkeit, so dass keine Notwendigkeit für jQuery oder was-so-ever. Auch wenn Sie Sie nicht verwenden, der code ist gut dokumentiert und sollte helfen, Sie durch das schreiben Ihrer eigenen.

    Für die drag-and-drop, es ist dragNdrop

    Für die Auswahl-Mechaniker, es ist DragSelect

    Du bist willkommen. Hoffe, das hilft!

    InformationsquelleAutor chitzui

  4. 0

    Obwohl Sie den Wunsch jquery 1.5, werde ich noch empfehlen, Check-out der jquery-ui-Draggable-option (von der Art, wie ich bin Dolmetschen Ihr Wunsch, dies scheint, wie das, was Sie versuchen zu erreichen).

    http://jqueryui.com/demos/draggable/

    jquery-ui ist immer sehr schnell, um aufzuholen mit der neuesten Version von jquery, und in vielen Fällen funktionieren. Ich habe festgestellt, dass jquery-ui neigt zu bleiben up-to-date mit jquery besser, als alle anderen add-ons, die ich gefunden habe.

    Bezug auf wissen zu wollen, wie dies geschehen soll, können Sie erkunden die unkomprimierte Kern von jquery Recht einfach. Es ist Recht gut dokumentiert und Recht einfach zu Lesen.

    Wie jquery-ui-bleiben Sie up to date mit den core habe ich einige Bedenken. Es lag hinter zwei major-Versionen (1.4 & 1.5), und es ist hinterher für mindestens ein Jahr aus, was ich mich erinnern kann. Es scheint, 1.4 eingeführt, so viele änderungen, dass es nicht wirklich jemand bereit, aktualisieren Sie alle, dass code.

    InformationsquelleAutor Ken I.

Schreibe einen Kommentar