首页 \ 问答 \ 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
更新时间:2021-05-07 16:05

最满意答案

你错过了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/

相关问答

更多

JSplumb可滚动容器(JSplumb scrollable container)

我终于得到了答案,这是一个CSS的事情。 我在演示中仔细查看了CSS并找到了这两个类。 .jtk-surface { overflow: hidden !important; position: relative; cursor: move; cursor: -moz-grab; cursor: -webkit-grab; touch-action:none; } .jtk-surface-nopan { overflow: scroll ! ...

在droppable的drop:函数中删除jsPlumb.draggable()之后的元素(Deleting an element after jsPlumb.draggable() in a droppable's drop: function)

正如你所提到的,使用jQuery draggable一切正常然后我建议你将jsPlumb draggable替换为: droppedEleClone.draggable({ snap: '.dragme', drag:function(e){ jsPlumb.repaint($(this)); } }); 克隆时也要确保提供不同的ID。 ...

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

你错过了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/ ...

元素没有在jsPlumb中拖动(elements not dragging in jsPlumb)

要启用拖动Div,必须绝对定位。 <style> #div1, #div4{background-color:red;width:150px;height:150px;position:absolute; } #div2, #div3{background-color:green;width:150px;height:150px; position:absolute;} </style> 更多信息检查jsplumbs doc。 你的工作小提琴 To enable dragging you ...

jsplumb deleteEndpoint无法按预期工作(jsplumb deleteEndpoint not working as expected)

单独循环遍历每个元素并删除端点对我有用 - 我认为当我开始使用第一个元素的端点时,对第二个元素上的端点的引用会受到影响。 HN。 deleteEmptyEndpoints: function(element) { var endpoints_to_delete = []; jsPlumb.selectEndpoints({source:element}).each(function(endpoint) { console.lo ...

jsPlumb拖动元素位置(jsPlumb drag element position)

您可以从jQuery拖动函数获取DIV的位置,同时您需要重新绘制被拖动元素的连接: $('SELECTOR').draggable({ containment: $('PARENT_SELECTOR'), drag:function(e){ // Your code comes here jsPlumb.repaint($(this)); // Note that it will only repaint the dragged element ...

扩展jsplumb.draggable拖动行为(Extend jsplumb.draggable drag behavior)

jsPlumb.draggable有助于在拖动时更新DOM元素。 相反,你可以用jQuery可拖动的方式编写代码,如下所示: $('#dragcodes').draggable( { drag: function(){ jsPlumb.repaint($(this)); // (or) jsPlumb.repaintEverything(); to repaint the connections and endpoints //followed by your code ...

在jsPlumb中删除所有连接以及元素(Deleting all Connections along with the Element in jsPlumb)

得到这个工作,我想分享它为任何人的未来参考。 我已将我的解决方案上传到github,其中work.html文件与此问题相关。 Got this to work and I would like to share it for future references for anyone. I've uploaded my solution to github where the work.html file relates to this question.

JSPlumb端点多个连接(JSPlumb Endpoint Multiple Connections)

我在端点选项中缺少maxConnections:-1 ! i was missing maxConnections:-1 in the End Point Options!

jsPlumb:如何在“mouseup”事件完成后获取一个元素(jsPlumb: How to get an element after “mouseup” event is done)

你似乎已经将这些“.node”div与jsPlumb 源或目标方法绑定在一起,这些方法将覆盖jQuery鼠标向上和鼠标按下。 因为jsPlumb处理鼠标事件上特定“.node”div上的连接创建。 因此,您无法在同一元素上绑定jsPlumb和jQuery事件,您需要像在“.agent-wrapper”上那样在父节点上处理这些事件。 It seems that you have bind those ".node" div's with jsPlumb source or target method ...

相关文章

更多

最新问答

更多
  • Laravel按第二级值排序第一级集合(Laravel sorting 1st level collection by 2nd level value)
  • 使用fgets和strcat时出现问题(Problems when using fgets and strcat)
  • C# - 检查两组索引值(C# - Checking Index values of two sets)
  • 关于redhat linux 9.0的三个镜像文件
  • 为什么要在go中分配对struct的引用?(Why assign a reference to a struct in go?)
  • sudo gem安装cocoapods --pre错误(sudo gem install cocoapods --pre error)
  • 加载完成后,在所有已加载的HTML文件中执行某些操作(After Load Complete, Do Something in All Loaded HTML Files)
  • 如何为wpf datagrid行应用样式(How to have style applied for wpf datagrid row)
  • 无法使用JavaScript FileReader API上传二进制文件(Trouble uploading binary files using JavaScript FileReader API)
  • 工作简历怎样写啊?电脑方面的
  • 查找通过gmail API检索的环聊和聊天消息的时间戳(Find timestamp for hangout and chat messages retrieved with gmail api)
  • PDFBox:禁用字体缓存或更改其位置(PDFBox: Disable Font Cache or change its location)
  • 知乎怎么改名字 知乎改名字教程
  • 关于Python中break的用法
  • 配置不正确:编辑django auth管道后,SECRET_KEY设置不能为空错误(ImproperlyConfigured: The SECRET_KEY setting must not be empty error after editing django auth pipeline)
  • 从Azure网站发送电子邮件,只有超时,用完了想法(Sending email from Azure website, only timeouts, running out of ideas)
  • 函数依赖vs类型家族(functional dependencies vs type families)
  • Carrierwave(与FOG)文件扩展名不匹配(Carrierwave (with FOG) filename extension mismatch in view)
  • 增加php的最大执行时间(Increase max execution time for php)
  • 简单的ListView:当我搜索它时,前一个位置,而不是搜索到的一个(Simple ListView: when I Search it goes the previous position, not to the searched one)
  • 检查自定义帐户身份验证器中的权限(checking permissions in custom account authenticator)
  • MediaPlayer seekTo随机时长(MediaPlayer seekTo random duration)
  • 如何使用Visual Studio Team Services在单个服务上发布包含多个站点的Azure云服务项目?(How can I publish an Azure Cloud Services project with multiple sites on a single service using Visual Studio Team Services?)
  • 如何使用格式将日期转换为另一个日期?(how to convert date to another date with format?)
  • 用扩展盒模糊逼近高斯模糊(Approximating Gaussian Blur Using Extended Box Blur)
  • 如何在文本文件中保存读取历史记录并在之后调用它(How to save readline history in a text file and call it afterwards)
  • 有没有更好的方法来编写这个LINQ查询?(Is there a better way to write this LINQ query?)
  • python中的运行时错误(nzec)(runtime error(nzec) in python)
  • cosos2d-box2d的isSensor方法没有给出冲突(isSensor method of cocos2d-box2d not giving collision)
  • 使用JOIN关键字时添加两个条件是一个好习惯吗?(Is it a Good Practice to Add two Conditions when using a JOIN keyword?)