JavaScript Arrastrar y seleccionar la funcionalidad hecha a la derecha

Question

Estoy tratando de escribir un arrastre & seleccionar la funcionalidad usando HTML & JavaScript. Con eso quiero decir que habrá un conjunto de objetos con posiciones absolutas arbitrarias. Quiero poder arrastrar el cursor sobre el área donde están distribuidos. Piense en ello como una estrategia de estrategia en tiempo real (selección de unidades) o, alternativamente, en cualquier editor de gráficos vectoriales (selección de objetos para moverlos y editarlos).

Antes que nada, estoy al tanto de las cosas que aparecen en las primeras páginas de Google & SO. Por lo tanto, de ninguna manera estoy pidiendo googlear esas cosas para mí y publicar aquí algunos enlaces aleatorios.

La mayoría de las soluciones que pude encontrar son de alguna manera defectuosas. El principal problema es la supresión de la selección de texto real, lo que parece un poco contrario a la naturaleza misma de un navegador web. Algunos de los fragmentos de código causan la selección de centelleo que me parece muy molesto. Algunos no se comportan bien en todos los principales navegadores.

Estoy pidiendo recomendaciones de código/bibliotecas que realmente usó, o que vio con éxito utilizado.

Lo segundo es que me gustaría entender realmente las partes internas de JavaScript detrás de la supresión de la selección. ¿Cómo debería hacerse en teoría? ¿Hay alguna forma no hackish de lograr eso?

Lo más cerca que yo era capaz de encontrar es la siguiente: http://view.jquery.com/tags/ui/1.5b2/demos/ui.selectable.html

Sin embargo, parece estar estrechamente acoplado con jQuery UI, que a su vez requiere jQuery 1.3.x mientras que yo estaba deseando a 1,5 usando jQuery

Answer 1

Disculpa mi inglés. Estoy usando esta biblioteca para arrastrar/soltar y es genial. No estoy seguro si es lo que necesita, pero podría ayudar a:

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

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

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

Answer 2

A pesar de que el deseo de usar jQuery 1.5, todavía recomendará la salida a la jquery- ui Opción arrastrable (por la forma en que estoy interpretando su deseo, esto parece ser lo que está intentando lograr).

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

jquery-ui es siempre muy rápido para ponerse al día con la última versión de jQuery, y en muchos casos no tendrán ningún problema. He descubierto que jquery-ui tiende a mantenerse actualizado con jquery mejor que cualquiera de los otros complementos que he encontrado.

Con respecto a querer saber cómo se debe hacer esto, puede explorar el núcleo sin comprimir de jquery con bastante facilidad. Está bastante bien documentado y es bastante sencillo de leer.

Answer 3

El principal problema es la supresión de la selección de texto real, lo que parece un poco contrario a la naturaleza de un navegador web.

La función que está buscando es e.preventDefault();

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

Esto simplemente resuelve el problema de la selección de texto. Puedo ver varias escrituras de selección de arrastre en la web, pero de alguna manera no puedo hacer que funcionen.

Answer 4

No estoy 100% seguro si recibí su pregunta correctamente. Pero hice dos plugins que manejan los casos que describes, creo. No necesitan ninguna dependencia, por lo que no es necesario jQuery o cualquier otra cosa. Incluso si no los usa, el código está bien documentado y debería ayudarlo escribiendo el suyo.

Para el arrastrar y soltar, no es dragNdrop
para el mecánico de la selección, hay DragSelect

de qué. ¡Espero que ayude!