Question

我正在使用简约dragdealer.js库来创建如下所示的滑块：

enter image description here

红色斑点有{ids #drag-button，#drag-button2等等。

当我尝试连接前两个红色按钮，以便使用以下代码连接它们时：

        jsPlumb.ready(function() {

            jsPlumb.connect({ source:"drag-button", target: "drag-button2",
                                  paintStyle:{ lineWidth:4, strokeStyle:'rgba(0, 0, 200, 0.5)' },
                                    anchors:["Center", "Center"],
                                    connector:"Straight",
                                    endpoint:[ "Rectangle", { width:1, height:1 }]
                            });
            jsPlumb.draggable("drag-button");
            jsPlumb.draggable("drag-button2");
        });

前两个按钮不加入。 然而我能够从源中拖动一条线，但是甚至无法与其他拖动按钮连接，因为它似乎具有不同的z-index，即使我更改了它。这就是我所说的，下面是CSS代码： enter image description here

#drag-button1{z-index:99;}
#drag-button2{z-index:99;}
#drag-button3{z-index:99;}
._jsPlumb_hover{z-index:99;}

我尝试制作一个JSFiddle但是没有成功，因为它不能识别jsPlumb，即使它被粘贴在它的Javascript部分中。可用于引用DOM still

Answer 1

我已经让你成为一个有效的工作人员：http://jsfiddle.net/tCk7m/5/

通过框架和＆amp ;;导入jQuery。通过外部资源扩展和添加资源。我链接到jsplumb 1.5.1，就像jsplumb网站上的例子一样。我将初始化代码放在所有其余代码之下，以防止对于尚未存在的类的对象初始化错误。

要修复z-index问题，您应该使用

._jsPlumb_connector { z-index:100; }

根据http://jsplumbtoolkit.com/doc/styling-via-css

我还添加了firebug，以便于调试。我不确定你要做什么。但现在您可以从第一个滑块绘制一条线（向下）。该线将随滑块一起移动。

希望有所帮助。如果您想要更清晰的jsFiddle，请尝试将库代码移动到Web上可用的文件中。

Answer 2

jsPlumb和Dragdealer插件似乎并不顺利。

好消息是讨论的滑块功能可以使用普通的jQuery轻松重建，因此您不需要Dragdealer库。

以下jsPlumb / jQuery代码与CSS中的一些小调整相结合，非常接近您想要的功能，我想：

jsPlumb.ready(function() {

  var showRatio = function(left) {
    var maxl = $(this).parent().width() - $(this).width();
    var ratio = Math.round(left / maxl * 100) / 100;
    $(this).children().text(ratio);
  };
  // the following 10 lines just set the initial values:
  var maxWidth = $(".dragdealer").width() -  $(".handle").width();
  var left = 0.3 * maxWidth;
  $("#my-slider .handle").css({left: left});
  showRatio.call($("#my-slider .handle")[0], left);
  left = 0.4 * maxWidth;
  $("#my-slider2 .handle").css({left: left});
  showRatio.call($("#my-slider2 .handle")[0], left);
  left = 0.7 * maxWidth;
  $("#my-slider3 .handle").css({left: left});
  showRatio.call($("#my-slider3 .handle")[0], left);

  // jsPlumb connections and dragging:
  jsPlumb.connect({ 
    source: $("#my-slider .handle"),
    target: $("#my-slider2 .handle"),
    connector:["Bezier", { curviness:70 }],
    cssClass:"c1",
    endpoint:"Blank",
    anchors:["BottomCenter", "TopCenter"],
    paintStyle:{ lineWidth:4, strokeStyle:'rgba(0, 0, 200, 0.5)' }
  });
  jsPlumb.connect({ 
    source: $("#my-slider2 .handle"),
    target: $("#my-slider3 .handle"),
    connector:["Bezier", { curviness:70 }],
    cssClass:"c1",
    endpoint:"Blank",
    anchors:["BottomCenter", "TopCenter"],
    paintStyle:{ lineWidth:4, strokeStyle:'rgba(0, 200, 0, 0.5)' }
  });

  var dragOptions = {
    axis: "x",
    containment: "parent",
    drag: function( event, ui ) {
      var left = ui.position.left;
      showRatio.call(this, left);
    }
  };
  jsPlumb.draggable($("#my-slider .handle"), dragOptions);
  jsPlumb.draggable($("#my-slider2 .handle"), dragOptions);
  jsPlumb.draggable($("#my-slider3 .handle"), dragOptions);
});

这是jsbin fiddle that I've created

有问题将jsPlumb与我的滑块集成？

2 个答案: