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

如何从可滚动的div拖动到droppable然后再拖?

从可滚动的div拖动到droppable然后再拖的实现,可以通过以下几个步骤来完成:

  1. 使用jQuery UI的draggable和droppable插件,可以方便地实现拖拽功能。
  2. 在可滚动的div上添加draggable属性,并设置相应的参数,例如:$("#draggable").draggable({ scroll: true, scrollSensitivity: 100, scrollSpeed: 50, containment: "parent", helper: "clone" });其中,scroll参数设置为true表示可以在拖动时自动滚动,scrollSensitivity和scrollSpeed分别表示滚动敏感度和滚动速度,containment参数设置为"parent"表示拖动范围限制在父元素内,helper参数设置为"clone"表示拖动时创建一个克隆元素。
  3. 在droppable区域添加droppable属性,并设置相应的参数,例如:$("#droppable").droppable({ accept: "#draggable", drop: function(event, ui) { // 处理拖放后的逻辑 } });其中,accept参数设置为需要拖动元素的选择器,drop参数是一个回调函数,当元素被成功拖放时会被触发,可以在这里处理拖放后的逻辑。
  4. 在drop回调函数中,可以获取拖动元素的信息,例如:drop: function(event, ui) { var draggable = ui.draggable; var id = draggable.attr("id"); var text = draggable.text(); // 处理拖放后的逻辑 }这里可以获取拖动元素的id和文本内容,也可以根据需要获取其他属性。
  5. 在drop回调函数中,可以将拖动元素添加到droppable区域,例如:drop: function(event, ui) { var draggable = ui.draggable; var clone = draggable.clone(); $(this).append(clone); // 处理拖放后的逻辑 }这里可以使用clone方法创建一个新的元素,然后将其添加到droppable区域中,也可以根据需要进行其他操作。

通过以上步骤,就可以实现从可滚动的div拖动到droppable区域,并在droppable区域中进行拖拽的功能。

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

相关·内容

Hooks + TS 搭建一个任务管理系统(八)-- 拖拽功能实现

官网 关于这个库的使用呢,我们简单的介绍一下,首先我们需要定义一个 Droppable 组件来包裹我们的拖拽的元素,表示这块区域的内容我们能够拖拽,其次需要对放的地方,也就是我们的元素添加一个 Draggable...placeholder} div> ) 1....在 HTML5 中新增的 Drop 和 Drag 当我们需要设置某个元素可拖放时,只需要 draggable 设置为 true 当拖放执行时,会发生 ondragstart...(drop 事件的默认行为是以链接形式打开) 通过 dataTransfer.getData("Text") 方法获得被拖的数据。...被拖数据是被拖元素的 id ("drag1") 把被拖元素追加到放置元素(目标元素)中 (参考于菜鸟教程) 可以亲自试一试:在线演示 总结 大概了解了一下如何使用 react-beautiful-dnd

63130

使用jQuery Draggable和Droppable实现拖拽功能

父节点可以折叠起来 2.用户可以通过拖放的操作,将元素从左侧拖放到右侧。如果是拖的父节点元素,那么需要把它子节点的元素一并拖到右边 3.元素放到右侧,右侧可以接受元素的区域有2种可能。...第一步:左侧元素可以拖 官方给出的实例是直接在要拖动的元素上添加class="ui-widget-content"。最初我是在所有要拖动的元素都添加了“ui-widget-content”类别。...但是测试拖动结果,发现元素只能在它所在的container里面拖动,再往右拖动,div会出现水平或垂直滚动条。不知道是不是自己在参数设置上不对。container设置了overflow:auto。...完成“放”的操作。可以从上图看出,我是将元素的上边左边和下边缘的左边存到一个数组里面。然后在“拖”的过程中,一直记录了拖动的左边,放到右侧时,就可以判断当前元素将要放的位置。具体可以下载代码查看。...完成代码之后的效果图如下: 代码下载:http://files.cnblogs.com/liminjun88/DragandDrop.rar 参考网址: http://jqueryui.com/droppable

2.9K60
  • MacBook Pro最全快捷键指南——高效型选手必备

    睡眠、退出登录和关机快捷键 电源按钮:按下可打开 Mac 电源或将 Mac 从睡眠状态唤醒。...Fn–上箭头 Page Up:向上滚动一页。 Fn–下箭头 Page Down:向下滚动一页。 Fn–左箭头 Home:滚动到文稿开头 Fn–右箭头 End:滚动到文稿末尾。...Option-Command-T 在当前“访达”窗口中有单个标签页开着的状态下显示或隐藏工具栏。 Option-Command-V 移动:将剪贴板中的文件从原始位置移动到当前位置。...这个快捷键可与任一亮度键搭配使用。 Option–“调度中心” 打开“调度中心”偏好设置。 Option–调高音量 打开“声音”偏好设置。这个快捷键可与任一音量键搭配使用。...按住 Command 键拖移 将拖移的项目移到其他宗卷或位置。拖移项目时指针会随之变化。 按住 Option 键拖移 拷贝拖移的项目。拖移项目时指针会随之变化。

    6.7K40

    mac全选文字的快捷键_MACBOOK最全快捷键指南

    睡眠、退出登录和关机快捷键 电源按钮:按下可打开Mac电源或将Mac从睡眠状态唤醒。当Mac处于唤醒状态时,按住这个按钮1.5秒钟会显示一个对话框,询问您是要睡眠、重新启动还是关机。...Fn-下箭头 Page Down:向下滚动一页。 Fn-左箭头Home:滚动到文稿开头 Fn-右箭头End:滚动到文稿末尾 Command-上箭头将插入点移至文稿开头。...Option- Command-V移动:将剪贴板中的文件从原始位置移动到当前位置。 Option- Command-Y显示所选文件的快速查看幻灯片显示。...这个快捷键可与任一亮度键搭配使用。 Option-“调度中心”打开“调度中心”偏好设置 Option-调高音量打开“声音”偏好设置。这个快捷键可与任一音量键搭配使用。...按住 Command键拖移将拖移的项目移到其他宗卷或位置。拖移项目时指针会随之变化。 按住 Option键拖移拷贝拖移的项目。拖移项目时指针会随之变化。

    2.3K10

    Mac下键盘使用

    睡眠、注销和关机快捷键 快捷键 描述 电源按钮 按下可打开 Mac 电源或将 Mac 从睡眠状态唤醒。...Fn–上箭头 向上翻页:向上滚动一页。 Fn–下箭头 向下翻页:向下滚动一页。 Fn–左箭头 开头:滚动到文稿开头。 Fn–右箭头 结尾:滚动到文稿末尾。...Option-Command-T 在当前 Finder 窗口中有单个标签页开着的状态下显示或隐藏工具栏。 Option-Command-V 移动:将剪贴板中的文件从原始位置移动到当前位置。...这个快捷键可与任一音量键搭配使用。 拖移时按 Command 键 将拖移的项目移到其他宗卷或位置。拖移项目时指针会随之变化。 拖移时按住 Option 键 拷贝拖移的项目。...拖移项目时指针会随之变化。 拖移时按住 Option-Command 为拖移的项目制作替身。拖移项目时指针会随之变化。 Option-点按开合三角形 打开所选文件夹内的所有文件夹。

    2.8K130

    jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

    下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCustomScrollbar 官方的介绍页面,但是根据自己的理解做了部分的调整和修改...加上的样式很简单,就是定义一个宽或者高或者宽高都定义,然后再定义一个 overflow 值为 auto。这样如果内容超出了指定的宽高,就会出现一个滚动条。...:根据内容区域自动调整滚动条拖块的长度 值:true,false scrollButtons:{ enable:Boolean }:是否添加 滚动条两端按钮支持 值:true,false scrollButtons...scrollTo 用法:$(selector).mCustomScrollbar("scrollTo",position); 你可以使用这个方法自动的滚动到你想要滚动到的位置。...然后再使用 CSS 定义滚动条的样式,使用 Javascript 相应鼠标的滚动事件,产生滚动下滑的效果。 明白了这点,下面我们就可以看一下滚动条的结构,然后使用 CSS 对其进行定义了。

    14.2K30

    ubuntu快捷键设置大全

    在gnome终端,不想输入长的,难记的路径,从nautilus拖个对应目录的文件过来,把文件名去掉,就等于输入长串的路径了。...nautilus的右键菜单增加---10楼 totem的列表里面,直接从nautilus里面拖目录过去,目录里面的音乐电影都会自动排到列表的。...代表 "Delete" 一样) 按住Ctrle+滚动鼠标中键,可以改变当前窗口中字体的大小 ctrl+shift +拖动,可以快速建立链接 1、窗口最大化时,直接拖标题栏,可立刻缩小窗口,如果不松手...10、鼠标中键直接单击 滚动条 的空白处,屏幕即滚动到那处。 11、快速粘贴:先在一个地方选中文字,在欲粘贴的地方按鼠标 中键 即可。 12、等效中键:a 、按下滑轮等效于中键。...,拖动到自己想要的大小便可。

    2K30

    Mac 键盘快捷键

    (如果您使用多个输入源以便用不同的语言键入内容,这些快捷键会更改输入源而非显示“聚焦”。了解如何更改冲突的键盘快捷键。)...Option-Command-T:在当前“访达”窗口中有单个标签页开着的状态下显示或隐藏工具栏。 Option-Command-V:移动:将剪贴板中的文件从原始位置移动到当前位置。...拖移项目时指针会随之变化。 拖移时按住 Option-Command:为拖移的项目制作替身。拖移项目时指针会随之变化。 按住 Option 键点按开合三角:打开所选文件夹内的所有文件夹。...Control-K:删除插入点与行或段落末尾处之间的文本。 Fn–上箭头:Page Up:向上滚动一页。 Fn–下箭头:Page Down:向下滚动一页。 Fn–左箭头:Home:滚动到文稿开头。...Fn–右箭头:End:滚动到文稿末尾。 Command–上箭头:将插入点移至文稿开头。 Command–下箭头:将插入点移至文稿末尾。 Command–左箭头:将插入点移至当前行的行首。

    2.8K20

    Mac快捷键

    睡眠、注销和关机快捷键 快捷键 描述电源按钮 轻按可打开 Mac 或将 Mac 从睡眠状态唤醒。...Fn–下箭头向下翻页:向下滚动一页。Fn–左箭头开头:滚动到文稿开头。Fn–右箭头结尾:滚动到文稿末尾。Command–上箭头将插入点移至文稿开头。Command–下箭头将插入点移至文稿末尾。...Command-Option-V移动:将剪贴板中的文件从其原始位置移动到当前位置。...拖移时按 Command 键将拖移的项目移到其他宗卷或位置。拖移项目时指针会随之变化。拖移时按 Option 键拷贝拖移的项目。拖移项目时指针会随之变化。...拖移时按 Command-Option为拖移的项目制作替身。拖移项目时指针会随之变化。Option-点按伸缩三角形打开所选文件夹内的所有文件夹。此快捷键仅在列表视图中有效。

    1.7K20

    HTML5 拖放

    不必去了解为什么这样,因为就是这样设计的: 1、设置元素为可拖放 为了使某个元素可拖动,我们给他添加 draggable 属性,并且把 draggable 属性设置为 true : 可拖动元素的 id ("drag1") } 3、设置拖动元素可以放置的位置(ondragover) 默认情况下,我们无法将...) 通过 dataTransfer.getData("img") 方法获得被拖的数据。...该方法将返回在 setData() 方法中设置为相同类型的数据 被拖元素数据 是被拖元素的 id ("drag1") 把被拖动图片元素 追加 到放置元素(目标元素)中 二、拖动一个图片到一个div容器中...id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">我是一个容器,请用鼠标拖动下面的图片移动到我上面div> <img id=

    1.5K20

    selenium动作链

    这个我们用到的页面是菜鸟编程里的实例,目的是将图中的可拖拽的方块移动到容器中,现在来具体实现一下。...filename=jqueryui-api-droppable") 此时,我们需要定位到标签,就是可拖拽对象的标签,我们打开检查,可以看到他的标签所在。...""" 如果标签是嵌套在iframe标签里的,则无法用find...的方法定位到,下面的一行会报错 div = bro.find_element_by_id("draggable") 调用switch方法...首先是创建一个实例,将我们的浏览器实例作为对象传入,然后再对我们的标签进行动作设置。...filename=jqueryui-api-droppable") """ 如果标签是嵌套在iframe标签里的,则无法用find定位到,下面的一行会报错 div = bro.find_element_by_id

    64310

    基于h5+ angularjs页面拖拽实现

    正题 1.h5提供的拖放事件 设置元素为可拖放 首先,为了使元素可拖动,把 draggable 属性设置为 true : 拖动什么 - ondragstart...); } 在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。...被拖数据是被拖元素的 id ("drag1") 把被拖元素追加到放置元素(目标元素)中 以上内容来源于W3school 2.整合angular 有时候不得不说前端的一些框架真的方便。...本文注意点 1.js的事件函数如何调用定义在angularjs中的函数?...我是个动图 不足 应该发布到npm上,然后留下一个绑定初始化图片数组的口子。这样大家从npm荡下来,只需绑定自己的初始化图片数据就可以实现功能。顶多再改改样式。

    1.6K20

    个人使用mac OS和win OS的差异

    (如果你使用多个输入法以便用不同的语言键入内容,这些快捷键会更改输入法而非显示“聚焦”。了解如何更改冲突的键盘快捷键。)...Option-Command-T:在当前“访达”窗口中有单个标签页开着的状态下显示或隐藏工具栏。 Option-Command-V:将剪贴板中的文件从原始位置移动到当前位置。...拖移项目时指针会发生变化。 拖移时按住 Option-Command:为拖移的项目制作替身。拖移项目时指针会发生变化。 按住 Option 键点按开合三角:打开所选文件夹内的所有文件夹。...Control-K:删除插入点与行或段落末尾处之间的文本。 Fn-上箭头:Page Up:向上滚动一页。 Fn-下箭头:Page Down:向下滚动一页。...Fn-左箭头:Home:滚动到文稿开头。 Fn-右箭头:End:滚动到文稿末尾。 Command-上箭头:将插入点移至文稿开头。 Command-下箭头:将插入点移至文稿末尾。

    2.6K20

    HTML5 的拖放(实例:两个div之间拖放图片)

    重点解释: 首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true : dataTransfer.setData() 方法设置被拖数据的数据类型和值: ondragover...事件规定在何处放置被拖动的数据。...如果需要设置允许放置,我们必须阻止对元素的默认处理方式。 这要通过调用 ondragover 事件的 event.preventDefault() 方法: 当放置被拖数据时,会发生 drop 事件。...调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开) 通过 dataTransfer.getData("Text") 方法获得被拖的数据。...该方法将返回在 setData() 方法中设置为相同类型的任何数据。 被拖数据是被拖元素的 id ("drag1") 把被拖元素追加到放置元素(目标元素)中 结果----》 拖动前 ? 拖动后 ?

    2.2K10

    使用 React-DnD 打造简易低代码平台

    低代码即无需代码或只需要通过少量代码,通过“拖拽”的方式即可快速生成应用程序。那么对于开发者而言,我们应该如何入手开发呢?...“拖拽”实现 关键词就是“拖拽”,其实“拖拽”的交互方式早在 Jquery 时代就有,关于拖拽在前端实现主要分为 2 种 是以 jquery-ui 为代表的 draggable 和 Droppable...,用于约束“拖”和“放”组件的关系,如果字符串不一致就无法回调事件,主要是为了避免页面中多个拖放的实例 item 就是拖动时候传递的数据 end 是拖放结束后的回调 collect 用于获得拖动的状态,...定义 JSON 接下来我们要: 定义可拖动的组件类型 每个组件类型对应的渲染组件 每个组件的属性设置 先来定义几个可拖动的字段吧,比如最基本的数据类型,div、h1、 p 标签都是一个组件,那就我先定义出以下字段类型...当每次拖动的时候,可以生成一个 uuid,然后使用深度优先遍历树数据 从根节点到叶子节点的由上至下的深度优先遍历树数据。

    6.2K20

    FlashFlex学习笔记(3):动态添加组件

    可参考以下图操作: 注: 1.as文件的类名与文件名要求一样,并且默认情况下必须与fla处于同一目录。...stage.stageWidth; var h:int=stage.stageHeight; trace("宽度:" + w + ",高度:" + h); //将Label与Button移动到水平中心点...Label控件到舞台上,然后再删除就行了,其它组件类似处理 个人猜测:就好比Winform中,我们引用某命名空间时,通常光using ...后,还需要添加对某程序集的引用,类似的:fla默认可能没有添加...fl.controls.Label的"程序集"引用,哪怕你在代码中import过了,但是运行时仍然找不到这个包,而手动拖一个到舞台上后,强迫flash自动添加了相关引用 最后一个问题:如果组件不全是动态添加的...,比如在设计视图下直接把一个Label拖动舞台上,在对应的as文件中如何引用呢?

    86080

    【新手指南】App原型设计:如何快速实现这6种交互效果?

    设计师在进行APP原型设计时,如何实现页面的滚动效果?其实,在一个滚动区里放几个组件就解决了?不信?不妨让我们一起看看如何操作吧! 设计步骤 Step 1:从左侧组件库中拖出滚动区组件放置工作区。...自动轮播效果 Step 1:从左侧组件库将图片轮播组件拖至工作区内。 Step 2:双击组件进行图片添加,可选择一或多张。 Step 3:在右侧属性面板中可设置动画效果,播放间隔,是否自动播放。...b.手动轮播效果 Step 1:从库中拖出滚动区组件至工作区,设置为横向滚动区双击后开始编辑。 Step 2:从组件库中选择图片或文字组件放至滚动区内,自定义内容排版。...设计步骤 Step 1:从左侧组件库中选择面板组件拖放至工作区,具体菜单样式可自定义。 Step 2:设置交互。 a. 面板1,链接到自己,调整大小。链接到面板2,位移。链接到面板3,位移。 b....如何利用原型设计工具制作一款简洁好用的搜索框呢? 搜索框一般分为以下两种效果: a.常规搜索 Mockplus直接提供的搜索框组件就可以满足需求,从组件库中拖出组件即可使用。

    3.2K40

    移动端app开发问题及理解

    ondragend 在拖动操作末端运行的脚本 ondragenter 当元素已被拖动到有效拖放区域是运行的脚本 ondragleave 元素离开有效拖放目标时运行的脚本 ondragover...元素在有效拖放目标上正在被拖动时运行的脚本 ondragstart 在拖动操作开端运行的脚本 ondrop 当被拖元素正在被拖放是运行的脚本 onmousewheel 当鼠标滚轮整被滚动时 onscroll...元素滚动条被滚动时 移动端事件有 click 单击事件 类似于pc端click,移动端中,连续click触发有200ms-300ms的延迟 touch 触摸类事件 touchstart 手指触摸到屏幕触发...touchmove 手指在屏幕上移动触发 touchend 手指离开屏幕触发 touchcancel 可由系统进行的触发,比如手指触摸屏幕时,突然alert了,或者系统中其他打断了touch行为可触发...js如何与app端交互 具体可看下这个 https://zhuanlan.zhihu.com/p/337890794 我的理解 首先了解下 app移动端网页运行在手机应用内嵌的浏览器引擎中,没有UI

    3.8K10
    领券