搜索 - 腾讯云开发者社区-腾讯云

文章/答案/技术大牛

发布

来自专栏快乐八哥
使用jQuery Draggable和Droppable实现拖拽功能
完成代码之后的效果图如下：代码下载：http://files.cnblogs.com/liminjun88/DragandDrop.rar 参考网址： http://jqueryui.com/droppable
3.5K60发布于 2018-01-18
来自专栏从零开始学 Web 前端
jQuery ui中sortable draggable droppable的使用
let selector = '.ptype-'+me.selectedSubType; $(selector).droppable({ // accept: selector // hoverClass: "drop-hover", tolerance: 'pointer', // 指定使用那种模式来测试一个拖动(draggable)元素"经过"一个放置（droppable } }); }, dropDestory() { let selector = '.ptype-'+me.selectedSubType; $(selector).droppable jquery-ui-api/sortable/ https://www.html.cn/jquery-ui-api/draggable/ https://www.html.cn/jquery-ui-api/droppable
3.3K10发布于 2020-07-25
来自专栏快乐八哥
使用jQuery UI的draggable和droppable完成拖拽功能--介绍
项目中主要使用到jQuery UI里面的draggable和droppable，因为很多老的浏览器都不值html5的drag api。我自己也没有去查看zTree的源代码，所以也不知道zTree底层拖拽实现是否也是使用了jQuery UI的draggable和droppable方法。第三部分--方案思路： 1.了解jQuery draggable和droppable方法和工作原理 2.递归思想 3.各个击破 4.熟练使用jQuery操作dom结构第四部分--参考网址： 1.http ://www.ztree.me/v3/main.php 2.http://jqueryui.com/draggable/ 3.http://jqueryui.com/droppable/
2.9K50发布于 2018-01-18
来自专栏MudOnTire
原生JS快速实现拖放（drag and drop）效果
class="droppable">

</body> 注意点容器的的class为droppable，用于接收被拖拽的元素，可被拖拽的元素class为draggable，同时设置draggable属性为true，表示该元素可以被拖拽。2. JS 最后，我们需要通过js监听draggable和droppable的相关的事件。的相关事件 for (const droppable of droppables) { droppable.addEventListener('dragover', dragOver); droppable.addEventListener ('dragleave', dragLeave); droppable.addEventListener('dragenter', dragEnter); droppable.addEventListener
4.1K51发布于 2019-07-02

来自专栏做不甩锅的后端

ActiveMQ 安装及使用过程

redeliveryCounter = 0, size = 0, properties = null, readOnlyProperties = true, readOnlyBody = true, droppable redeliveryCounter = 0, size = 0, properties = null, readOnlyProperties = true, readOnlyBody = true, droppable redeliveryCounter = 0, size = 0, properties = null, readOnlyProperties = true, readOnlyBody = true, droppable redeliveryCounter = 0, size = 0, properties = null, readOnlyProperties = true, readOnlyBody = true, droppable redeliveryCounter = 0, size = 0, properties = null, readOnlyProperties = true, readOnlyBody = true, droppable

1.7K20发布于 2021-11-01

Cassandra的数据布局 - 调试SSTables

echo "$meta" | grep Minimum\ time | cut -d" " -f3| cut -c 1-10) '+%m/%d/%Y') $(echo "$meta" | grep droppable echo "$meta" | grep Minimum\ time | cut -d" " -f3| cut -c 1-10) '+%m/%d/%Y') $(echo "$meta" | grep droppable tombstones: 0.0 5.0G Jan 6 08:30 mc-647149-big-Data.db Max: 01/02/2017 Min: 01/01/2017 Estimated droppable tombstones: 0.0 4.7G Jan 6 08:26 mc-647148-big-Data.db Max: 01/03/2017 Min: 01/02/2017 Estimated droppable tombstones: 0.0 3.7G Jan 6 08:18 mc-647147-big-Data.db Max: 01/04/2017 Min: 01/03/2017 Estimated droppable

3.6K00发布于 2018-05-30

《刚刚问世》系列初窥篇-Java+Playwright自动化测试-20- 操作鼠标拖拽 - 上篇（详细教程）

/default.html"); //4.开始拖拽 page.locator("#draggable").dragTo(page.locator("#droppable /default.html"); //4.开始拖拽 //page.locator("#draggable").dragTo(page.locator("#droppable ")); page.dragAndDrop("#draggable", "#droppable"); System.out.println("Test ")); //page.dragAndDrop("#draggable", "#droppable"); page.locator("#draggable").hover (); page.mouse().down(); page.locator("#droppable").hover(); page.mouse().

42510编辑于 2025-01-26

来自专栏北京宏哥

《最新出炉》系列初窥篇-Python+Playwright自动化测试-18-处理鼠标拖拽-上篇

browser.new_context() page = context.new_page() page.goto("https://jqueryui.com/resources/demos/droppable /default.html") page.wait_for_timeout(1000) page.locator("#draggable").drag_to(page.locator("#droppable browser.new_context() page = context.new_page() page.goto("https://jqueryui.com/resources/demos/droppable default.html") page.wait_for_timeout(1000) # page.locator("#draggable").drag_to(page.locator("#droppable ")) page.drag_and_drop('#draggable', '#droppable') page.wait_for_timeout(3000) # page.pause(

11K50编辑于 2023-10-07

来自专栏三掌柜的技术空间

低代码开发的协同之道：拖拽UI、规则引擎与扩展钩子的深度剖析

React和React-Beautiful-Dnd库实现，如下所示：import React, { useState } from 'react'; import { DragDropContext, Droppable reorderedItem); setItems(newItems); }; return ( <DragDropContext onDragEnd={onDragEnd}> <Droppable </Draggable> ))} {provided.placeholder}

)} </Droppable 下面是一个简单的示例代码，展示三大核心组件的协同工作，具体如下所示：import React, { useState } from 'react'; import { DragDropContext, Droppable </Draggable> ))} {provided.placeholder}

)} </Droppable

36221编辑于 2025-06-26

来自专栏技术进阶之路

JavaScript学习笔记（五）——Ajax

实现拖入购物车功能 droppable()方法实现接收容器。 language="javascript"> $(function () { $(".draggable").draggable({ helper: "clone" }); $("#droppable-accept ").droppable({ accept: function (draggable) { return $(draggable).hasClass("green"); },

2.8K10发布于 2020-07-31

来自专栏Hi, Python

selenium 基本用法

filename=jqueryui-api-droppable' browser.get(url) browser.switch_to.frame('iframeResult') browser.find_element_by_css_selector('.ui-draggable') target = browser.find_element_by_css_selector('.ui-droppable

53130发布于 2019-09-29

来自专栏muller的测试分享

使用selenium轻松实现元素拖拽

filename=jqueryui-api-droppable")# 定位需要拖拽的元素element_to_drag = driver.find_element_by_id("draggable")# 定位拖拽目标元素target_element = driver.find_element_by_id("droppable")# 执行拖拽操作actions = ActionChains(driver

70010编辑于 2024-03-25

有趣的拖放案例

const onDragEnd = () => { /** 移动数据 **/ }; return ( <DragDropContext onDragEnd={onDragEnd}> <Droppable droppableId="droppable"> {(provided) => (

))} {provided.placeholder} )} </Droppable

1K00编辑于 2024-02-01

来自专栏coding

2018年python3与selenium教程第2节动作链实现拖曳效果执行Javascript获取节点信息

filename=jqueryui-api-droppable' browser.get(url) # 访问网页 browser.switch_to.frame('iframeResult') source browser.find_element_by_css_selector('#draggable') target = browser.find_element_by_css_selector('#droppable

1.1K30发布于 2018-09-26

来自专栏北京宏哥

《手把手教你》系列技巧篇（三十）-java+ selenium自动化测试- Actions的相关操作下篇（详解教程）

implicitlyWait(8, TimeUnit.SECONDS); driver.get("http://jqueryui.com/resources/demos/droppable draggable")); // 定位拖拽目标位置元素 WebElement target_ele = driver.findElement(By.id("droppable target_ele).build().perform(); // 验证拖拽成功 if(driver.findElement(By.xpath("//*[@id='droppable ; } System.out.println(driver.findElement(By.xpath("//*[@id='droppable']/p[text()=' isDisplayed()); assert(driver.findElement(By.xpath("//*[@id='droppable']/p[text()='Dropped!']

1.7K30发布于 2021-10-18

来自专栏快乐八哥

HTML中拖放介绍

1.在jQuery UI里面会经常使用Draggable和Droppable，实现Web开发中拖放效果，当然这不是原生条的拖放，所以在处理复杂的拖放上还是需要自己动手写很多代码，最近开发中就遇到这个问题没有具体开发过mobile web应用，不知道jQuery UI的draggable和droppable是否支持手机上的触摸操作。

4.1K100发布于 2018-01-18

来自专栏python学习教程

Python爬虫之Selenium库的使用方法

filename=jqueryui-api-droppable"browser.get(url)browser.switch_to.frame('iframeResult')source = browser.find_element_by_css_selector ('#draggable')target = browser.find_element_by_css_selector('#droppable')actions = ActionChains(browser filename=jqueryui-api-droppable')browser.switch_to.frame('iframeResult')source = browser.find_element_by_css_selector

93410发布于 2021-01-29

来自专栏小丞前端库

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

添加一个拖拽功能实现效果像这样我们实现这个功能采用了一个 react-beautiful-dnd 的库，关于这个库可以查看： npm官网关于这个库的使用呢，我们简单的介绍一下，首先我们需要定义一个 Droppable & { children: ReactNode } export const Drop = ({ children, ...props }: DropProps) => { return <Droppable }) } return

}) } </Droppable

87630发布于 2021-11-08

来自专栏杂七杂八

selenium使用

filename=jqueryui-api-droppable' browser.get(url) browser.switch_to.frame('iframeResult') source = browser.find_element_by_css_selector ('#draggable') target = browser.find_element_by_css_selector('#droppable') actions = ActionChains(browser filename=jqueryui-api-droppable' browser.get(url) browser.switch_to.frame('iframeResult') source = browser.find_element_by_css_selector

1.4K30发布于 2018-08-30

来自专栏睡不着所以学编程

selenium动作链

filename=jqueryui-api-droppable") 此时，我们需要定位到标签，就是可拖拽对象的标签，我们打开检查，可以看到他的标签所在。 filename=jqueryui-api-droppable") """ 如果标签是嵌套在iframe标签里的，则无法用find定位到，下面的一行会报错 div = bro.find_element_by_id

88810编辑于 2022-09-20

第 2 页第 3 页第 4 页

点击加载更多

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

jQuery ui中sortable draggable droppable的使用

使用jQuery UI的draggable和droppable完成拖拽功能--介绍

原生JS快速实现拖放（drag and drop）效果