首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在JointJs中,如何通过拖动嵌入的元素来移动所有元素?

在JointJs中,可以通过以下步骤来实现通过拖动嵌入的元素来移动所有元素:

  1. 首先,确保你已经引入了JointJs库,并创建了一个画布(paper)对象。
  2. 创建你需要的元素,包括嵌入的元素和其他相关元素。可以使用JointJs提供的各种元素类型,如矩形(Rect)、圆形(Circle)、文本(Text)等。
  3. 将嵌入的元素添加到画布上,可以使用paper.addCell()方法将元素添加到画布上。
  4. 创建一个嵌入式(embedded)元素,用于包含其他需要移动的元素。可以使用JointJs提供的嵌入式元素类型,如嵌入式组(EmbeddedGroup)。
  5. 将需要移动的元素添加到嵌入式元素中,可以使用嵌入式元素的embed()方法将其他元素嵌入到该元素中。
  6. 为嵌入的元素添加事件监听器,以便在拖动时触发移动操作。可以使用JointJs提供的事件监听器,如element.on()方法。
  7. 在事件监听器中,通过获取拖动的偏移量,计算需要移动的元素的新位置。可以使用JointJs提供的坐标计算方法,如element.position()方法。
  8. 更新需要移动的元素的位置,可以使用JointJs提供的元素更新方法,如element.position(x, y)方法。
  9. 重绘画布,以显示更新后的元素位置。可以使用paper.render()方法重新渲染画布。

下面是一个示例代码,演示了如何通过拖动嵌入的元素来移动所有元素:

代码语言:txt
复制
// 创建画布
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 800,
  height: 600,
  model: graph
});

// 创建嵌入式组
var embeddedGroup = new joint.shapes.standard.EmbeddedGroup({
  position: { x: 100, y: 100 },
  size: { width: 200, height: 200 }
});

// 创建需要移动的元素
var rect1 = new joint.shapes.standard.Rectangle({
  position: { x: 120, y: 120 },
  size: { width: 80, height: 40 },
  attrs: { body: { fill: 'blue' } }
});

var rect2 = new joint.shapes.standard.Rectangle({
  position: { x: 160, y: 160 },
  size: { width: 80, height: 40 },
  attrs: { body: { fill: 'red' } }
});

// 将需要移动的元素嵌入到嵌入式组中
embeddedGroup.embed(rect1);
embeddedGroup.embed(rect2);

// 将嵌入式组添加到画布上
graph.addCell(embeddedGroup);

// 监听嵌入式组的拖动事件
embeddedGroup.on('change:position', function(element, newPosition) {
  var offsetX = newPosition.x - element.previous('position').x;
  var offsetY = newPosition.y - element.previous('position').y;

  // 移动嵌入的元素
  rect1.position(rect1.position().x + offsetX, rect1.position().y + offsetY);
  rect2.position(rect2.position().x + offsetX, rect2.position().y + offsetY);

  // 重绘画布
  paper.render();
});

这样,当你拖动嵌入式组时,其中的元素(rect1和rect2)也会跟随移动。你可以根据实际需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

理论 | HTML5 进阶系列:拖放 API 实现拖放排序

dataTransfer 对象 在所有拖放事件中提供了一个数据传递对象 dataTransfer,用于源对象和目标对象间传递数据。接下来认识一下这个对象方法和属性,来了解它是如何传递数据。...例如: clearData() 该方法清除 dataTransfer 对象存放数据。参数可选,为数据种类。若参数为空,则清空所有种类数据。...例如: setDragImage() 该方法通过用img元素来设置拖放图标。接收三个参数,第一个为图标元素,第二个为图标元素离鼠标指针X轴位移量,第三个为图标元素离鼠标指针Y轴位移量。...主要代码如下: 完整代码地址:https://github.com/lin-xin/blog/tree/master/drag-demo 兼容 主要是IE兼容不太好,不过至少IE10能兼容上面的拖动排序...不过还好,有一个插件能让它在移动端完美兼容。 插件地址:ios-html5-drag-drop-shim 只需要在原有的代码引入该插件,即可在移动端上实现拖动了。

1.2K31

HTML5 进阶系列:拖放 API 实现拖放排序

前言 HTML5 中提供了直接拖放 API,极大方便我们实现拖放效果,不需要去写一大堆 js,只需要通过监听元素拖放事件就能实现各种拖放功能。...接下来认识一下这个对象方法和属性,来了解它是如何传递数据。 setData() 该方法向 dataTransfer 对象存入数据。...若参数为空,则清空所有种类数据。例如: event.dataTransfer.clearData(); setDragImage() 该方法通过用img元素来设置拖放图标。...:drag-demo 兼容 主要是IE兼容不太好,不过至少IE10能兼容上面的拖动排序。...不过还好,有一个插件能让它在移动端完美兼容。 插件地址:ios-html5-drag-drop-shim 只需要在原有的代码引入该插件,即可在移动端上实现拖动了。

1.6K10

HTML5 进阶系列:拖放 API 实现拖放排序

前言 HTML5 中提供了直接拖放 API,极大方便我们实现拖放效果,不需要去写一大堆 js,只需要通过监听元素拖放事件就能实现各种拖放功能。...接下来认识一下这个对象方法和属性,来了解它是如何传递数据。 setData() 该方法向 dataTransfer 对象存入数据。...若参数为空,则清空所有种类数据。例如: event.dataTransfer.clearData(); setDragImage() 该方法通过用img元素来设置拖放图标。...:drag-demo 兼容 主要是IE兼容不太好,不过至少IE10能兼容上面的拖动排序。...不过还好,有一个插件能让它在移动端完美兼容。 插件地址:ios-html5-drag-drop-shim 只需要在原有的代码引入该插件,即可在移动端上实现拖动了。

1.9K70

html5鼠标拖动排序及resize实现方案分析及实践

对列表进行拖动排序,尺寸改变。之前一般会使用jQuery-UI。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽效果。...而HTML5直接提供了拖放API,只要通过监听元素拖放事件就能实现各种拖放功能。 拖放(Drag和 drop)是 HTML5 标准组成部分。...setDragImage(element,x,y) 该方法通过img元素来设置拖放图标 element表示拖拽时鼠标下面的图片(通常是image元素,也可以说canvas元素) x、y分别指示相对于图片横向和纵向偏移量...应该在dragstart事件设置此属性,以便为拖动源设置所需拖动效果。... dragenter 和dragover 事件处理程序,该属性将设置为dragstart 事件期间分配任何值,因此,可以使用effectAllowed来确定允许哪个效果。

3K10

低代码设计器自由布局拖动实现原理

,我们会获取到拖动事件对象 (e),拖动对象我们能获取到一个重要属性 dataTransfer ,我们可以通过 dataTransfer dropEffect 属性控制被拖动元素放置行为...,上文中我们讲到,拖动元素以及目标元素可以设置一系列事件,那么我们就可以组件列表渲染时,为每个组件设置一下 dragstart 事件,该事件我们需要做如下处理: 设置拖动元素放置行为为移动,...拖动元素目标元素松手时添加元素到画布,即将组件数据添加到list2元素所对应数据记录也了这个组件画面坐标位置。 然后dragend事件取听以上动作。...那拖动到画布组件又是如何实现通过拖动灵活移动位置呢?...同样,我们可以将画布组件添加mousedown事件,事件我们添加mousemove事件监听,当画布组件进行移动时,我们实时将该被移动元素所对应数据坐标进行更新。下面是代码实现。

4K30

拖拽牛逼,轻松实现一个自由拖拽组件

,我们会获取到拖动事件对象 (e),拖动对象我们能获取到一个重要属性 dataTransfer ,我们可以通过 dataTransfer dropEffect 属性控制被拖动元素放置行为...,上文中我们讲到,拖动元素以及目标元素可以设置一系列事件,那么我们就可以组件列表渲染时,为每个组件设置一下 dragstart 事件,该事件我们需要做如下处理: 设置拖动元素放置行为为移动,...拖动元素目标元素松手时添加元素到画布,即将组件数据添加到list2元素所对应数据记录也了这个组件画面坐标位置。 然后dragend事件取听以上动作。...那拖动到画布组件又是如何实现通过拖动灵活移动位置呢?...同样,我们可以将画布组件添加mousedown事件,事件我们添加mousemove事件监听,当画布组件进行移动时,我们实时将该被移动元素所对应数据坐标进行更新。下面是代码实现。

1.8K30

「Adobe国际认证」Adobe PS软件,内容识别修补和移动

所有图层取样启用此选项以使用所有图层信息在其他图层创建移动结果。“图层”面板中选择目标图层。 3.选择图像上要替换区域。您可以使用修补工具绘制选区,也可以使用任何其他“选择”工具。...4.将选区拖曳到您想要进行填充区域。 内容识别移动 使用内容识别移动工具可以选择和移动图片一部分。图像重新组合,留下空洞使用图片中匹配元素填充。您不需要进行涉及图层和复杂选择周密编辑。...对所有图层取样启用此选项以使用所有图层信息选定图层创建移动结果。“图层”面板中选择目标图层。 投影时变换启用该选项后,您可以对刚刚已经移动到新位置那部分图像进行缩放。...文末教程彩蛋 通过使用修补工具,可以用其它区域或图案素来修复选中区域。像修复画笔工具一样,修补工具会将样本像素纹理、光照和阴影与源像素进行匹配。您还可以使用修补工具来仿制图像隔离区域。...2.执行下列操作之一: 图像拖动以选择想要修复区域,并在选项栏中选择“源”。 图像拖动,选择要从中取样区域,并在选项栏中选择“目标”。 注意:您也可以选择修补工具之前建立选区。

1.3K30

drag事件详解:html5鼠标拖动排序及resize实现方案分析及实践

,被拖拽对象离开目标对象时触发拖动事件列表每一个可拖动元素拖动过程,都会经历三个过程,拖动开始-->拖动过程--> 拖动结束拖动目标上触发事件 (源元素-被拖动元素):ondragstart...它返回一个我们dragstart事件设置拖动数据格式数组。 格式顺序与拖动操作包含数据顺序相同。files返回拖动操作文件列表。包含一个在数据传输上所有可用本地文件列表。...setDragImage(element,x,y)该方法通过img元素来设置拖放图标element表示拖拽时鼠标下面的图片(通常是image元素,也可以说canvas元素)x、y分别指示相对于图片横向和纵向偏移量...dropEffect值:none:不能把拖动元素放在这里。这是除文本框之外所有元素默认值。...move:应该把拖动元素移动到放置目标copy:应该把拖动元素复制到放置目标link:表示放置目标会打开拖动元素(但拖动元素必须是一个链接,有URL)chrome 默认是显示一个绿色加号,设置

6.2K21

Unity2D手册翻译(三)

最右边滑动条控制纹理像素(mipmap)。移动滑动块到左边是减少Sprite纹理解析度。最重要空间是左上 Slice 菜单,这里有选项可以自动把图片里元素拆分开。...你可以通过拖动图片一个分割区域,拖动一个新矩形,来获得一个新孤立元素。你会发现,当你选择了一个矩形时候,一个面板会在窗口右上方显示。 ?...面板里空间让你选择sprite图形名字,并且通过坐标来设置矩形位置和尺寸。边界宽度,从左边,上边,右边和下边可以用像素来指定。...自动切片 手动隔绝Sprite矩形很好用,但是大多数情况下,Unity可以通过检测图形元素,然后自动为你提取它们,来节省你工作。...如果你点击控制条里那个 Slice 菜单,你可以看见这个面板: ? 当切片类型设置为 Automatic ,编辑器会尝试通过透明度去猜测sprite元素边界。

2K40

12.HTML5下一代HTML标准介绍与初识尝试

2.视频和音频:HTML5新增了和标签,可以直接在网页嵌入视频和音频,并通过JavaScript进行控制和交互。...3.建议尽量闭合HTML元素 HTML5 你不一定要关闭所有元素 (例如 元素),但我们建议每个元素都要添加关闭标签。...11.必须设置数据,HTML5 元素是必须,标题名描述了页面的主题,其次 meta 设置便于浏览器解析与SEO收录。...相关 HTML5 标签: ondrag : 元素拖动时运行脚本。(每350ms执行一次) ondragstart : 拖动操作开端运行脚本。...ondragend : 拖动操作末端运行脚本。 ondragover : 当元素在有效拖放目标上正在被拖动时运行脚本。 ondragenter : 当元素已被拖动到有效拖放区域时运行脚本。

27720

H5新增特性及语义化标签

元素来包含视频标准方法。...Canvas – 图形 创建一个画布,一个画布在网页是一个矩形框,通过 元素来绘制。默认情况下 元素没有边框和内容。... HTML5 ,拖放是标准一部分,任何元素都能够拖放。   拖放过程分为源对象和目标对象。源对象是指你即将拖动元素,而目标对象则是指拖动之后要放置目标位置。...拖放源对象(可能发生移动)可以触发事件——3个: dragstart:拖动开始 drag:拖动 dragend:拖动结束 整个拖动过程组成: dragstart*1 + drag*n + dragend...*1 拖放目标对象(不会发生移动)可以触发事件——4个: dragenter:拖动着进入 dragover:拖动着悬停 dragleave:拖动着离开 drop:释放 整个拖动过程组成1: dragenter

2.2K30

H5多媒体能力

HTML5通过HTML标签\和\来支持嵌入媒体,是开发者能够方便将媒体嵌入。...这是一个可选属性;你可以audio元素中使用 \ 元素来替代该属性指定嵌入音频。 volume 音频播放音量。值从0.0 (无声) 到 1.0 (最大声)....元素error属性会包含更多信息| | loadeddata | 媒体第一帧已经加载完毕| | loadedmetadata | 媒体数据已经加载完毕,现在所有的属性包含了它们应有的有效信息。...| | progress | 告知媒体相关部分下载进度时周期性地触发。有关媒体当前已下载总计信息可以元素buffered属性获取到。| | ratechange | 回放速率变化时触发。...| ###业内实例 ##\标签 \ 元素 用于HTML或者XHTML文档嵌入视频内容。

1.9K11

打破常规图表制作新思维!!!

上一篇给大家讲了一个专业、规范、完善商务图表元素应该如何布局! 可能很多小伙伴儿会有疑问,默认输出图表样式跟最终我们想要达到效果相差十万八千里。...想要在默认图表布局上通过局部调整处理貌似达不到那种上下顺序整齐排版样式。 确实,想通过默认Excel图表样式修改来完成基本没有可能。...但是大家别忘记了,Excel背后还有单元格呢,Excel之所以成为图表神器除了自带丰富内置图表种类及样式之外,其灵活单元格操作也可以作为图表辅助元素来帮我们达到美化图表作用。...❸此时你会发现图表四角已经严格锚定到一系列矩形单元格区域之中。然后你就可以随意图表上下区域单元格添加主标题、副标题、脚注等图表辅助元素(注意对齐以及字体)。...❹对了图表格式化时候一定要取消绘图区和图表区填充色和外框线,否则会遮挡单元格文本(图表绘图区、图表区分别右键单击设置相应属性就OK了)。

84070

Web前端事件

事件模型 DOM0级事件 这样事件模型,事件是没有事件流概念,事件绑定比较简单: 直接在HTML绑定事件处理函数 通过js获取元素来绑定事件... HTML5 鼠标有了新事件,如下表格: 属性 描述 ondrag 元素拖动时运行脚本。...ondragend 拖动操作末端运行脚本 ondragenter 当元素元素已被拖动到有效拖放区域时运行脚本。 ondragleave 当元素离开有效拖放目标时运行脚本。...ondragover 当元素在有效拖放目标上正在被拖动时运行脚本 ondragstart 拖动操作开端运行脚本 ondrop 当被拖元素正在被拖放时运行脚本 onmousewheel 当鼠标滚轮正在被滚动时运行脚本...onreset 当表单重置按钮被点击时触发。HTML5 不支持。 onselect 元素中文本被选中后触发。 onsubmit 提交表单时触发。

3.2K00

OpenLayers入门(一)

、TopoJSON、KML、GML和其他格式矢量数据 支持OGC制定WMS、WFS等GIS网络服务规范 支持移动设备上运行 可以通过css来为地图控件设置样式 面向对象开发方式,OpenLayers...万物皆对象 和另一个流行地图库leaflet不同,openLayers完全是用面向对象方式开发,且几乎内置了所有地图开发需要功能,而leaflet核心库只提供基本功能,其他功能都是通过第三方插件进行扩展...显示要素 地图上显示一些自定义元素可以说是最基本也是最常见需求,如果要显示元素结构或样式比较复杂,可以使用Overlay,它可以将DOM元素地图上进行显示,并将随地图一起移动。...], 'EPSG:4326'),// 地图投影位置 offset: [-17, -17], // 元素显示像素偏移量 autoPan: true, // 自动移动地图以完整显示元素...}) }) }) */ map.addLayer(vector) 上面就实现了添加一个icon要素到地图上,如果要添加多个的话实例化多个Feature就好了,效果如下: 有时还需要支持能拖动素来修改它位置

4.8K40

【Hello CSS】第四章-HTML标签与语意

data-* 用于存储页面或应用程序私有定制数据。 dir 规定元素内容文本方向。 draggable 规定元素是否可拖动。 dropzone 规定在拖动拖动数据时是否进行复制、移动或链接。...head 标签用于定义文档头部,它是所有头部元素容器。 描述了文档各种属性和信息,包括文档标题、 Web 位置以及和其他文档关系等。...通常情况下,浏览器会从当前文档 URL 中提取相应元素来填写相对 URL 空白。 使用 标签可以改变这一点。...内容分区: 内容分区元素允许你将文档内容从逻辑上进行组织划分。 2. 文本内容 使用 HTML 文本内容元素来组织开标签和闭标签里块或章节内容。...我们知道,HTML,每个标题是通过标题标签来定义,标题标签一共有6个,分别是:h1~6。

39820

ps切图必知必会

快捷键ctrl+R调出标尺) 图层(F7),信息(F8)注意要把尺寸换成像素为单位 移动工具(对图片进行移动,拖动,移动它会脱离图层,改变元素位置) 矩形选框工具(可以量图片,图标的具体尺寸,注意进行图片选中复制时...,图层上下关系与后面的数字没有系,与他排列顺序有关,图层越靠上,层级就越高,可以手动拖拽,调整层级关系,通过它来切图,去除矩形选框ctrl+D,或者鼠标点击一下矩形选框,点图片区域任意一部分,...原文件或者图片文字 方法一:使用矩形框工具,空白区选一个区域,复制,然后粘贴,拖动该复制区块盖住文字或者图片即可即可 方法二:使用自由变换(推荐使用):空白区选一个空白矩形框—>ctrl+T–>...如何在网页抠图 印屏幕,键盘上prtSc SysRq键(把你屏幕上你看到给截取出来) 浏览器(chrome)插件,控制台工具,审查元素,探测到图片,打开图片url,打开图片保存即可 网页上图片都可以拿到...(psd | jPG/Gif/png)特点 JPG/GIF/PNG应用 如何抹掉psd原文件或者图片文字 添加前景色和删除背景色 如何在网页抠图 合成雪壁图(css sprite) 使用雪碧图结合定位嵌入到网页中去

2.9K20

黑客马拉松

今天我就结合自己这次hackathon经历,讲讲hackathon如何选题,如何利用好一天时间鏖战(包括pivot),以及如何pitch。 选题 既然是随心所欲,选题就要选自己想做东西。...其实类似的路径代码也存在。一个公司代码库里面有数百万,数千万行代码,有谁能把它捋清楚,有谁能在很短时间内了解其中细节呢?可不可以将代码库可视化,让其能够自己告诉你其中各种逻辑/调用关系?...\n") } 这个脚本监控某个process,任其运行5s,把所有遇到function call都存入ignored,5s之后函数调用关系会被打印出来。...静态profile就是生成代码调用关系 —— 我最初打算做一个python脚本,用户输入一个函数名,我为她生成两张图,一张是往前回溯,展示所有调用这个函数完整路径;另一张是往后追溯,展示所有以它为根整个调用路径...最终这些图表能够django做website展示出来,还能查询。

1.4K50
领券