首页 \ 问答 \ 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

相关问答

更多

性能计数器的价值很奇怪(Value of performance counter is strange)

第一个值将始终为0,因为没有什么可比较的。 您必须运行它多次才能进行比较。 来自MSDN : 如果计数器的计算值取决于两个计数器读数,则第一个读取操作返回0.0。 重置性能计数器属性以指定不同的计数器等效于创建新的性能计数器,使用新属性的第一个读取操作返回0.0。 调用NextValue方法之间建议的延迟时间是一秒,以允许计数器执行下一次增量读取。 The first value will always be 0 because there's nothing to compare to. Yo

获取Lotus Domino中组的成员(Get members of a group in Lotus Domino)

在LotusScript中,有一个名为“NotesName”的类来执行此类操作。 如果您的文档中有一个名为“NAME”的字段,则代码如下所示: Dim doc as NotesDocument Dim nnName as NotesName 'Somehow get the document, using ws.CurrentDocument.document 'or db.UnprocessedDocments.GetFirstDocument, depends on your situat

Quartz2d和实例方法(Quartz2d and Instance Method)

因为你的drawRectV2:方法确实什么也没做。 您正在使用UIGraphicsBeginImageContext(200, 200)创建图像上下文并在此图形上下文中绘制一个圆,但您不使用此绘图的结果。 创建图形上下文只是为您提供了一些图形缓冲区(换句话说 - 图形表面),并且您可以绘制到此缓冲区/曲面中。 但是除非你绘制到iOS视图绘图系统提供的系统上下文,否则你不会看到绘图的结果(我指的是在重写的UIView的drawRect:方法中调用时用UIGraphicsGetCurrentCont

有没有办法在Kafka流中重新分配输入主题?(Is there a way to repartition the input topic in Kafka streams?)

是的你可以。 您设置了一个新密钥,然后通过另一个主题管道数据。 KStream stream = ... KStream repartionedStream = stream.selectKey(...) .through("topic-name"); 请注意,在使用所需数量的分区启动应用程序之前,需要创建在through()使用的主题。 Yes you can. You set a new key and afterward

如何在创建新记录时在风帆中使用“等待”(How to use “await” in sails when creating a new record)

SyntaxError:await仅在异步函数中有效 这是因为您在非async的函数中使用await 请记住, await关键字仅在异步函数中有效 。 如果在异步函数体外使用它,则会出现SyntaxError。 源 MDN异步功能 您需要使函数async才能工作。 在代码中进行这些更改, 'use strict'; create: async function(req, res, next) { var new_place = await Place.create({ ...

让DIV标签扩展到页面底部或内容(Getting DIV tags to extend to bottom of page or content)

我过去遇到过类似的情况,我能想到的就是使用javascript ... CSS(据我所知)并没有真正具备您正在寻找的动态功能。 I've run into a similar case in the past and all I was able to come up with was using javascript... CSS (as far as I know) doesn't really have that dynamic capability that you are lookin

传入信号是否在php应用程序中的流上崩溃阻塞(Is incoming signals crashes blocking on a stream in php application)

好吧,stream_get_contents函数通常不能与unix信号一起使用。 我使用下一个代码而不是“stream_get_contents” $finisher = "SSH_FINISHED_COMMAND"; $command .= " && echo \"{$finisher}\""; $command = str_replace(' &&' , ' 2>&1 &&', $command); $stream = ssh2_exec( $this->con

javascript调用打开多个窗口,但只打开一个窗口(javascript call to open multiple windows, but only one opens)

浏览器不喜欢打开多个新标签以阻止广告这样做。 在Chrome中,每个用户交互只能打开一个新选项卡。 The remark of @sebastian is correct. In chrome any interaction can just open one windows. But I'd like to add that 2nd, 3th, ... window.open calls are just waiting to get an approval by the pop-up blo

相关文章

更多

最新问答

更多
  • 根据Woocommerce中的自定义字段计算自定义购物车商品价格(Custom cart item price calculation based on dimentions custom fields in Woocommerce)
  • 分开foreach项目并单独打印(Separate foreach items and print them individually)
  • 写模式管道是否同步?(Is write mode pipe synchronous?)
  • 发现可用的Windows Phone强调色和本地化名称(Discover available Windows Phone accent colors and localized names)
  • 使用多线程和WPF更新集合(Update Collection with multithreading and WPF)
  • 如何在字符串的情况下使用同步?(How should the synchronization be used in case of strings?)
  • 打印唯一的行,比较不超过N个字符(Print unique lines, compare no more than N characters)
  • Javascript / jQuery - 如何调用switch case从另一个函数执行(Javascript/jQuery - how to call a switch case to execute from another function)
  • Hbase超时错误不断发生(Hbase timeout errors keep occuring)
  • 如何在Delphi中更改TabControl中活动TAB的颜色(How to change the color of active TAB in a TabControl, in Delphi)
  • 正则表达式:在sublime文本中替换一些PHP代码(Regex: replace some pieces of php code in sublime text)
  • 在带有Scene2D的LibGDX中,如何在按下按钮时连续向右走?(In LibGDX with Scene2D, how can I continuously walk to the right when a button is pressed?)
  • 累加器如何在Haskell中工作?(How do accumulators work in Haskell?)
  • 使用开关检查市场和前缀与正确的货币符号(using switch to check market and prefix with correct currency symbol)
  • 在哪里分配一次使用类?(Where to allocate one time use class?)
  • 如何从两个DateTime / NaiveDateTime获取持续时间?(How do I get Duration from two DateTime / NaiveDateTime?)
  • 解析TimeSpan大于24小时?(Parse a TimeSpan greater than 24 hours? [duplicate])
  • 如何在球拍中本地更改阅读规则?(How to locally change reading rules in racket?)
  • 数据库应该由DI注入时的模拟存储(通过构造函数)(Mock storage when database should be injected by DI (through constructor))
  • 使用maven集成2个eclipse项目(Integrate 2 eclipse projects using maven)
  • 角度ng-repeat不检测变化(Angular ng-repeat not detecting changes)
  • Xaml组件在Silverlight + XNA应用程序的多个页面中可见(Xaml component visible in multiple pages in Silverlight+XNA applications)
  • 如何将`var`变量等同于另一个查询(How to equate `var` variable to another query)
  • 如何设计hyperledger链代码以适合您的业务?(how to design your chaincode of hyperledger to fit for your business?)
  • PHP readfile错误(PHP readfile error)
  • 在Date之后排序列表然后是时间(Sorting list after Date then time)
  • Android内部版本号(Android build number)
  • 在没有预设退出条件的情况下停止无限循环(stopping an infinite loop with no preset exit condition)
  • Phonegap应用程序全屏通过html页面中的按钮(Phonegap Application fullscreen through a button in html page)
  • PAA是否适合在门户网站中自动执行wcm库部署和设置?(Is PAA a good candidate for automating wcm library deployment and setup in portal?)