jsPlumb error al hacer los elementos movibles

EFEX · 17 Diciembre 2013, 23:58 PM

Hola estoy utilizando jsplumbtoolkit.com con jquery para conectar elementos, el problema que tengo ahora es que no puedo hacer que los elementos sean movibles o no a travez de un boton.

Código (javascript) [Seleccionar]


<!doctype html>
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
  <script src="js/jquery-1.9.0-min.js"></script>
  <script src="js/jquery-ui-1.9.2-min.js"></script>
  <!-- <script src="js/jquery.ui.touch-punch.min.js"></script> -->
  <script src="js/jquery.jsPlumb-1.5.4-min.js"></script>
  <script type="text/javascript">
   //$(document).ready(function() {
    //var elem = $('div[class^="container_"]');

    
   //});
  </script>
  <style type="text/css">
   #container{width: 600px;height: 600px;background-color: #f3f3f3;overflow: hidden;margin-left: auto;margin-right: auto;}
   #container div:hover{cursor: pointer;}
   .container_0, .container_1{position:relative; width: 100px; height: 100px; background-color: red;}

   .container_1{top:20px;left: 20px;}
   .container_0{top:20px;left: 300px;}

   ._jsPlumb_drag_select * {
    /* background-color: blue; */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
   }
  </style>
 </head>
 <body>
  <button class="dragElem">Drag</button>
  <div id="container">
   <div class="container_0"></div>
   <div class="container_1"></div>
  </div>
  <script type="text/javascript">
  //$(document).ready(function(){
   jpcl = jsPlumb.CurrentLibrary;
   _bind = jpcl.bind;

   jsPlumb.ready(function() {
    var elem = $('div[class^="container_"]');
    var pointConf = {
     anchor:"Continuous",
     uniqueEndpoint:true,
     deleteEndpointsOnDetach:false,
     endpoint:["Rectangle", { width:40, height:20 }],
     maxConnections:3
    };

    var instance = jsPlumb.getInstance({
     Connector : "Flowchart",
     DragOptions : { cursor: "pointer" },
     Container : "container"
    });

    instance.doWhileSuspended(function() {
     
     // No se puede utilizar makeSource si el elemento puede ser movido 
     //jsPlumb.draggable(elem);
     
     instance.makeTarget(elem, pointConf);
     instance.makeSource(elem, pointConf);
     
     instance.bind("click", function(conn, originalEvent) {
      if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
       instance.detach(conn); 
     });

     var buttonDrag =  jsPlumb.getSelector(".dragElem");
     _bind(buttonDrag, "click", function(event) {
      var stateBool = instance.toggleDraggable(elem); // Aqui esta el problema
      //instance.setDraggable(elem, true);   // Tambien trate de usar setDraggable(), pero obtengo el mismo error
      alert(stateBool);
      
      event.stopPropagation();
      event.preventDefault();
     });

    });
    
   });
  //});
  </script>
 </body>
</html>

Este es el error que siempre obtengo... no se el por que

CitarError: cannot call methods on draggable prior to initialization; attempted to call method 'option'

Estoy haciendo el ejemplo con jquery-1.9.0-min.js, jquery-ui-1.9.2-min.js, jquery.jsPlumb-1.5.4-min.js.
http://jsplumbtoolkit.com/apidocs/jsPlumbInstance.html#toggleDraggable
http://jsplumbtoolkit.com/apidocs/jsPlumbInstance.html#setDraggable

EFEX · 18 Diciembre 2013, 09:05 AM

Bueno levantanme fresco pude dar con una solucion..

Código (html4strict) [Seleccionar]

<button class="dragElem" drag="true" >Drag</button>

Código (javascript) [Seleccionar]


instance.doWhileSuspended(function() {
     
     //instance.makeTarget(elem, pointConf);
     //instance.makeSource(elem, pointConf);
     instance.draggable(elem);
     //...
     var buttonDrag =  jsPlumb.getSelector(".dragElem");
     _bind(buttonDrag, "click", function(event) {
      var state = $(this).attr('drag');      
      var stateDrag = instance.toggleDraggable(elem);

      if (state == 'true') {
       $('.lines-types button').removeAttr('disabled');
       $(this).attr('drag', 'false');

       instance.makeSource(elem, pointConf);
       instance.makeTarget(elem, pointConf);
      }else{
       $('.lines-types button').attr('disabled', 'true');
       $(this).attr('drag', 'true');

       instance.unmakeEverySource();
       instance.unmakeEveryTarget();
      }

      event.stopPropagation();
      event.preventDefault();
     });
     /...
    });

Test Foro de elhacker.net SMF 2.1

jsPlumb error al hacer los elementos movibles

EFEX

EFEX