javascript - 在将jsPlumb与我的滑块集成时遇到问题吗？

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



红色斑点的ID为#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代码：

#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

最佳答案

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

关于javascript - 在将jsPlumb与我的滑块集成时遇到问题吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18264002/