ejemplos - resizable jquery
¿Cómo dibujar una línea entre arrastrable y droppable? (2)
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. :)
Estoy usando la excelente interfaz de usuario de JQuery para hacer un "mapeo" para que el usuario pueda "asignar" personas de un programa a personas de otro programa.
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:
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
Manifestación
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!):
y una pequeña imagen: