Javascript 将jsPlumb与我的滑块集成时出现问题？

我正在使用极简的

dragdealer.js

库创建一个如下所示的滑块：

红色斑点有ID

#拖动按钮

，

#拖动按钮2

等等

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

        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索引，即使我更改了此按钮。下面是我要说的，下面是CSS代码：

---

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

我已经为您制作了一个工作JSFIDLE：

通过框架和扩展导入jQuery，并通过外部资源添加资源。我链接到jsplumb 1.5.1，如jsplumb网站上的示例所示。我将您的初始化代码放在所有其他代码的下面，以防止尚未存在的类的对象初始化错误

要解决z索引问题，您应该使用

._jsPlumb_connector { z-index:100; }

依照

为了便于调试，我还添加了firebug。 我不知道你想达到什么目的。但是现在您可以从第一个滑块（向下）绘制一条线。 线将随滑块一起移动

---

希望有帮助。如果您想要更干净的JSFIDLE，请尝试将您的库代码移动到web上可用的文件中。

我已经为您提供了一个可用的JSFIDLE：

通过框架和扩展导入jQuery，并通过外部资源添加资源。我链接到jsplumb 1.5.1，如jsplumb网站上的示例所示。我将您的初始化代码放在所有其他代码的下面，以防止尚未存在的类的对象初始化错误

要解决z索引问题，您应该使用

._jsPlumb_connector { z-index:100; }

依照

为了便于调试，我还添加了firebug。 我不知道你想达到什么目的。但是现在您可以从第一个滑块（向下）绘制一条线。 线将随滑块一起移动

---

希望有帮助。如果您想要更干净的JSFIDLE，请尝试将您的库代码移动到web上可用的文件中。

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);
});

---

这里有一个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);
});

这是一个