首页
学习
活动
专区
工具
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} ) 1....在 HTML5 中新增 Drop 和 Drag 当我们需要设置某个元素拖放时,只需要 draggable 设置为 true 当拖放执行时,会发生 ondragstart...(drop 事件默认行为是以链接形式打开) 通过 dataTransfer.getData("Text") 方法获得被数据。...被数据是被元素 id ("drag1") 把被元素追加到放置元素(目标元素)中 (参考于菜鸟教程) 可以亲自试一试:在线演示 总结 大概了解了一下如何使用 react-beautiful-dnd

61430

使用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.8K60
  • 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.3K40

    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.1K30

    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.7K20

    ubuntu快捷键设置大全

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

    2K30

    Mac快捷键

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

    1.7K20

    HTML5 拖放

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

    62810

    基于h5+ angularjs页面拖拽实现

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

    1.5K20

    个人使用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.5K20

    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,然后使用深度优先遍历树数据 根节点到叶子节点由上至下深度优先遍历树数据。

    6K20

    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文件中如何引用呢?

    85280

    【新手指南】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
    领券