首页 \ 问答 \ jsPlumb draggable element javascript函数(jsPlumb draggable element javascript function)

jsPlumb draggable element javascript函数(jsPlumb draggable element javascript function)

JSFiddle显然可以让你理解这个问题。

我希望端点绑定到每个容器内的可拖动的元素,但只有首先绘制的端点是正确的。 第二次调用绘制函数时,位置不正确并且不同步拖动。

我猜测问题在于CSS位置,但我找不到它。

jsPlumb.ready(function() {
  $(".scroll-box").draggable({
    drag: function() {
      jsPlumb.repaintEverything();
      //jsPlumb.repaint($(this)); 

    }
  });
  //            jsPlumb.draggable($(".scroll-box"));


  drawEndPoints("in-leaf", "Right");
  drawEndPoints("out-leaf", "Left");



});

function drawEndPoints(classname, endpointposition) {

  var endpointOptions = {
    isSource: true,
    isTarget: true,
    endpoint: ["Dot", {
      radius: 10
    }],
    style: {
      fillStyle: 'blue'

    },
    maxConnections: -1,
    connector: "Straight",
    connectorStyle: {
      lineWidth: 2,
      strokeStyle: 'black'
    },
    scope: "blackline",
    dropOptions: {
      drop: function(e, ui) {
        alert('drop!');
      }
    }
  };

  jsPlumb.addEndpoint($("." + classname), {
    anchor: endpointposition
  }, endpointOptions);
  //jsPlumb.repaintEverything();
}

The JSFiddle will clearly allow you to understand the problem.

I want the endpoints to be binded to the elements inside each container which are draggable but only the endpoints drawn first are correct. The second time the draw function is called, the positions are incorrect and the dragging is not synced.

I have a guess that the problem lie with the CSS position but I can't find it.

jsPlumb.ready(function() {
  $(".scroll-box").draggable({
    drag: function() {
      jsPlumb.repaintEverything();
      //jsPlumb.repaint($(this)); 

    }
  });
  //            jsPlumb.draggable($(".scroll-box"));


  drawEndPoints("in-leaf", "Right");
  drawEndPoints("out-leaf", "Left");



});

function drawEndPoints(classname, endpointposition) {

  var endpointOptions = {
    isSource: true,
    isTarget: true,
    endpoint: ["Dot", {
      radius: 10
    }],
    style: {
      fillStyle: 'blue'

    },
    maxConnections: -1,
    connector: "Straight",
    connectorStyle: {
      lineWidth: 2,
      strokeStyle: 'black'
    },
    scope: "blackline",
    dropOptions: {
      drop: function(e, ui) {
        alert('drop!');
      }
    }
  };

  jsPlumb.addEndpoint($("." + classname), {
    anchor: endpointposition
  }, endpointOptions);
  //jsPlumb.repaintEverything();
}

原文:https://stackoverflow.com/questions/39097828
更新时间:2019-12-02 00:07

最满意答案

你错过了jsPlumb.setContainer($("body"));

https://jsfiddle.net/mkaran/mLthybzo/

https://jsplumbtoolkit.com/community/doc/home

编辑:你的例子的小提琴https://jsfiddle.net/mkaran/aof6mq34/


You are missing the jsPlumb.setContainer($("body"));

https://jsfiddle.net/mkaran/mLthybzo/

https://jsplumbtoolkit.com/community/doc/home

EDIT: a fiddle with your example https://jsfiddle.net/mkaran/aof6mq34/

2016-08-23

相关文章

更多

最新问答

更多
  • jsPlumb draggable element javascript函数(jsPlumb draggable element javascript function)
  • MVC4:ViewModel(带有radiobuttonlist)在HttpPost之后为空(MVC4: ViewModel (with radiobuttonlist) is empty after HttpPost)
  • 如何在同一帐户上设置“Dev repo”(在prod和团队之间)(How to set up a “Dev repo” (between the prod and the team) on the same account)
  • 如何在tcl中将eth0配置为发送方udp端口(how to configure eth0 as a sender udp port in tcl)
  • 如何在datarow []中的列中找到最大值?(How to find max value in a column in a datarow[] ?)
  • 如何使用预定义文本替换来自数据库的部分结果(How do I replace part of result coming from Database with predefined text)
  • Selenium Java注入了新的Javascript函数(Selenium Java inject new Javascript function)
  • 使用.on的多个下拉菜单选择文本仅适用于第一个下拉列表(Multiple Dropdowns Menu Selection text using .on works only on first dropdown)
  • 快速将黄土曲线添加到大型数据集图中的方法(Quick way to add loess curve to large data set graph)
  • FilteringSelect in mvc(FilteringSelect in mvc)
  • 在Delphi XE2中开发Mac或iOS应用程序需要哪些硬件/软件?(What hardware/software is necessary to develop Mac or iOS apps in Delphi XE2?)
  • 在原型的构造函数中初始化属性时获取“未定义”(Getting 'undefined' when a property is initialized in the constructor of a prototype)
  • 通过越狱加载的应用程序的Documents文件夹位置(Location of Documents folder for an app loaded via jailbreak)
  • 在OpenGL中使用可编程和固定管道功能(Using both programmable and fixed pipeline functionality in OpenGL)
  • 将任何用户输入重定向到单独的底层程序(redirect any user input to a separate underlying program)
  • 编辑文本不能正常工作android(Edit texts not working properly android)
  • “user_denied”Facebook应用页面上的Facebook用户区域设置(Facebook user locale on “user_denied” facebook app page)
  • 在大图像中找到小的部分透明图像的坐标(find coordinates of small partially-transparent image within a large image)
  • 我如何在cakephp 3.1中获得完整的相对路径?(How i can get full relative path of image in cakephp 3.1?)
  • 如何保存拖动标记的新本地化?(How to save new localization of dragged marker?)
  • MySQL UPDATE vs INSERT和DELETE(MySQL UPDATE vs INSERT and DELETE)
  • 在执行查询之前,在SQLAlchemy模型中将datetime转换为unix时间戳?(Convert datetime to unix timestamp in SQLAlchemy model before executing query?)
  • OpenCL与OpenGL互操作的优势(Advantage of OpenCL interoperability with OpenGL)
  • 如何解析用点和等分隔的数据然后添加到listview(How to parsing data from delimited with dot and equal then add to listview)
  • 带调试输出的X3解析器段错误(BOOST_SPIRIT_X3_DEBUG)(X3 parser segfaults with debug output (BOOST_SPIRIT_X3_DEBUG))
  • 将文件夹名称添加到fgrep结果(Add folder name to fgrep result)
  • 在MySQL中加载一个表是非常慢的(Loading one table in MySQL is ridiculously slow)
  • 如何将JSON放入PHP变量?(How do I put JSON into a PHP Variable?)
  • 如何绕过Microsoft.Speech.Recognition中的不流畅?(How to bypass disfluencies in Microsoft.Speech.Recognition?)
  • 原点的最后一行是什么?(What is the last row of an origin for?)