1

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

在此处输入图像描述

红色斑点具有 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 代码： 在此处输入图像描述

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

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

4

2 回答 2

2

我让你成为一个工作的 jsFiddle：http: //jsfiddle.net/tCk7m/5/

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

要解决您的 z-index 问题，您应该使用

._jsPlumb_connector { z-index:100; }

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

我还添加了萤火虫的东西以便于调试。我不确定你想要达到什么目的。但是现在您可以从第一个滑块（向下）画一条线。该线将随滑块移动。

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

于 2013-08-20T10:19:35.283 回答
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 小提琴

于 2013-08-20T22:07:49.973 回答