¿Cómo dibujar una línea entre arrastrable y droppable?

Estoy usando la excelente interfaz de usuario de JQuery para hacer un “mapeo” para que el usuario pueda “asignar” personas de un progtwig a personas de otro progtwig.

usando este simple JQuery:

$(document).ready(function() { $("div .draggable").draggable({ revert: 'valid', snap: false }); $("div .droppable").droppable({ hoverClass: 'ui-state-hover', helper: 'clone', cursor: 'move', drop: function(event, ui) { $(this) .addClass('ui-state-highlight') .find("img") .removeAttr("src") .attr("src", "_assets/img/icons/check-user-48x48.png"); $(this).droppable('disable'); $(ui.draggable) .addClass('ui-state-highlight') .find("img") .removeAttr("src") .attr("src", "_assets/img/icons/check-user-48x48.png"); $(ui.draggable).draggable('disable'); } }); $("div .droppable").bind("dblclick", function() { $(this) .removeClass('ui-state-highlight') .find("img") .removeAttr("src") .attr("src", "_assets/img/icons/user-48x48.png"); $(this).droppable('enable'); EnableSource($(this)); }); }); 

Llego a esto:

texto alternativo

lo que realmente quería era (si es posible) crear una línea entre Elsa y Kjell, de modo que quede clara la conexión entre ellos.

Siempre puedo hacerlo con números dentro de los cuadros, pero realmente quería saber cómo hacerlo usando las líneas.

Gracias

  • actualizado (08.Jul.2013) Actualizado con las últimas versiones de las bibliotecas; html refactorizado usando JsRender;
  • actualizado (29.Sep.2011) Se agregó Repo de GIT; limpió el código; actualizar a las últimas versiones de framework;
  • actualizado (03.Mar.2013) Enlaces corregidos con el ejemplo de trabajo;

El ejemplo actual usa:

  • HTML HTML tipo de documento
  • jQuery v.1.10.2
  • jQuery UI v.1.10.3
  • Raphael v.2.0.1
  • JsRender v.1pre35 (opcional, utilizado para la simplificación de HTML)

Fuente

Código fuente en Git Repository

Manifestación

Demostración de página en JSBIN


Funciona en FF , IE , Chrome , Safari y Opera .

probado en:

  • Firefox 6 y 7 .. 22
  • IE 8 y 9 .. 10
  • Chrome 12+ .. 27
  • Safari 5+ .. 6
  • Opera 11.51 .. 15

para mostrarles a todos, acabo de hacer una pequeña demostración de mi logro (¡soy una persona orgullosa hoy!):

Demostración de video

y una pequeña imagen:

texto alternativo

Soy demasiado nuevo para publicar un enlace, pero si buscas en Google “Biblioteca para dibujo simple con jQuery”, puedes encontrar lo que estás buscando. 🙂

enlace aquí

Intereting Posts