Fonction de glisser-déplacer et de sélectionner JavaScript activée

J'essaie d'écrire une fonctionnalité de drag & select en utilisant HTML et JavaScript. Par cela, je veux dire qu'il y aura un ensemble d'objets avec des positions absolues arbitraires. Je souhaite pouvoir faire glisser le curseur sur la zone où ils sont disposés. Pensez-y comme une stratégie RTS (sélection d'unités) ou, en variante, n'importe quel éditeur de graphiques vectoriels (en sélectionnant des objets pour les déplacer et les éditer).

Tout d'abord, je suis conscient des choses qui apparaissent dans les premières pages de Google et SO. Par conséquent, je ne suis pas en train de demander de googler ces choses pour moi et de publier ici quelques liens aléatoires.

La plupart des solutions que j'ai pu trouver sont en quelque sorte fausses. Le problème principal consiste à supprimer la sélection réelle du texte, ce qui semble être contraire à la nature même d'un navigateur Web. Certains des extraits de code provoquent un scintillement de sélection que je trouve très ennuyant. Certains ne se comportent pas bien dans tous les principaux navigateurs.

Je demande des recommandations de code / bibliothèques que vous avez utilisé, ou que vous avez utilisé avec succès.

Deuxièmement, j'aimerais comprendre les internautes de JavaScript derrière la suppression de la sélection. Comment devrait-on le faire en théorie. Y a-t-il une façon non difficile d'y parvenir?

Le plus proche que j'ai pu trouver, c'est ceci: http://view.jquery.com/tags/ui/1.5b2/demos/ui.selectable.html

Cependant, il semble être étroitement couplé avec jQuery UI, qui nécessite à son tour jQuery 1.3.x alors que j'avais vraiment hâte d'utiliser jQuery 1.5

    Désolé de mon anglais. J'utilise cette bibliothèque pour faire glisser / déposer et c'est génial. Je ne sais pas si c'est ce dont vous avez besoin, mais cela pourrait vous aider:

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

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

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

    Le problème principal consiste à supprimer la sélection réelle du texte, ce qui semble être contraire à la nature même d'un navigateur Web.

    La fonction que vous recherchez est e.preventDefault ();

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

    Cela résout simplement le problème de la sélection du texte. Je peux voir divers scénarios de drag-select js sur le Web, mais en quelque sorte, je ne peux pas les faire fonctionner.

    Même si vous désirez utiliser jquery 1.5, je recommanderais toujours de vérifier l'option jquery-ui Draggable (de la façon dont j'interprète votre désir, cela semble être ce que vous essayez d'accomplir).

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

    Jquery-ui est toujours très rapide pour rattraper la version la plus récente de jquery, et dans beaucoup de cas, ça va bien. J'ai trouvé que jquery-ui tend à rester à jour avec jquery mieux que n'importe lequel des autres add-ons que j'ai trouvé.

    En ce qui concerne le désir de savoir comment cela devrait être fait, vous pouvez explorer le noyau non compressé de jquery assez facilement. Il est assez bien documenté et assez simple à lire.