如何在draggable和droppable中选择相对父元素中的类元素
在使用draggable和droppable进行元素拖拽和放置时，可以通过选择相对父元素中的类元素来实现。下面是一个完善且全面的答案：
在draggable和droppable中选择相对父元素中的类元素，可以通过以下步骤实现：
- 首先，确保在HTML中正确引入了jQuery和jQuery UI库，这两个库是draggable和droppable的基础。
- 在HTML中，为父元素和需要拖拽的元素添加相应的类或ID，以便在JavaScript中进行选择和操作。例如，给父元素添加一个类名为"container"，给需要拖拽的元素添加一个类名为"draggable-item"。
- 在JavaScript中，使用jQuery选择器选择父元素和需要拖拽的元素。可以使用类选择器或ID选择器来选择元素。例如，使用类选择器选择父元素：$(".container")，使用类选择器选择需要拖拽的元素：$(".draggable-item")。
- 使用draggable方法将需要拖拽的元素设置为可拖拽。例如，使用以下代码将元素设置为可拖拽：
- 使用draggable方法将需要拖拽的元素设置为可拖拽。例如，使用以下代码将元素设置为可拖拽：
- 使用droppable方法将父元素设置为可放置区域。例如，使用以下代码将父元素设置为可放置区域：
- 使用droppable方法将父元素设置为可放置区域。例如，使用以下代码将父元素设置为可放置区域：
- 在droppable方法中，可以通过回调函数来处理放置事件。例如，使用以下代码在放置事件发生时执行一些操作：
- 在droppable方法中，可以通过回调函数来处理放置事件。例如，使用以下代码在放置事件发生时执行一些操作：
- 在回调函数中，可以通过ui对象获取被拖拽的元素的信息，例如位置、大小等。
以上是在draggable和droppable中选择相对父元素中的类元素的基本步骤。根据具体需求，可以进一步扩展和定制拖拽和放置的行为。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙（Tencent Cloud Metaverse）：https://cloud.tencent.com/solution/metaverse
相关·内容
1回答
如何在draggable和droppable中选择相对父元素中的类元素
javascript、jquery
<div class="droppable"/> <div class="draggable"><div class="draggable"> <div class="droppable"/>
</d
浏览 21提问于2016-09-02得票数 1
回答已采纳
1回答
Jquery拖放-如何将拖动的内容拖放到父元素的选定目标(子元素)中
jquery、jquery-ui、drag-and-drop
我有两个div源(包含拖放元素)和目标(用于删除拖动内容的空间)。我已经将带有四列的行设置并附加到目标div中，以使其可下垂。您可以在中找到一个示例代码。所有人都是在拖放的情况下工作。但是我的问题是“当我将一个内容拖到目标div的子目录中时，所拖动的内容就会附加到从父级到选定子目标的整个树中”，所以请帮助我。1)如何将内容放置到选定的子元素中，而
浏览 2提问于2015-12-22得票数 0
回答已采纳
2回答
JQuery用户界面-可拖放到带有特定类标记的元素
javascript、jquery、html
是否可以将拖放的TD限制为只有具有特定类的元素。 <td class="droppable">droppable area</td> <-- draggable
浏览 3提问于2014-02-24得票数 0
回答已采纳
3回答
remove()不适用于可拖动的图像
javascript、jquery、jquery-ui
我在# .dropzone里面有一个回收站div，当元素被拖入其中时，可以使用.remove()删除它们(使用jquery ui、.droppable和.draggable类)： tolerance: 'pointer', drop: function(event, ui){
ui.draggable<
浏览 0提问于2016-06-07得票数 0
4回答
如何在jquery中仅使一个UL元素不可拖动？
javascript、jquery、jquery-ui
我使用的是可拖动的jquery sdk，我只想让UL中的一个成员不可拖动，而其他所有东西都可以根据进行拖动。
例如，我想让第一张照片不可拖动。
浏览 0提问于2012-07-27得票数 0
回答已采纳
1回答
开始使用jquery拖动时获取包含div的id
javascript、jquery、draggable、droppable
我有一个元素，这是可拖动的，然后是几个元素，这是可放在同一页。<div id=&q
浏览 0提问于2013-02-19得票数 0
回答已采纳
1回答
从另一个div的内部拖放一个div。
javascript、jquery、css、jquery-ui、drag-and-drop
我正在尝试jQuery UI的拖放函数，但是如何在div2中拖动一个div1，然后像这样在div3中放置。
我的当前代码是这样的#div2 { min-height: 50em;}$( function() { containment: '#div
浏览 2提问于2013-11-07得票数 0
回答已采纳
1回答
Jquery可拖放事件委托:停止和删除
javascript、jquery、css、jquery-ui
我的问题是得到掉元素的位置。 }当被拖动时，我想从它的父元素中移除元素，并将它附加到它的新父元素中。这是我用.droppable做的
$('.flakUp, .flak
浏览 1提问于2016-04-08得票数 0
回答已采纳
1回答
如何从可拖项目中制作可拖项目？
javascript、html、css
我有一个可拖动的窗口，我想要使这个窗口必须是独立的，并且它可以被拖动，并且当被删除时，元素被复制到它被拖动的位置，并且它也在窗口中。基本上，当您将文档从窗口拖动到屏幕上的任何位置时，当您停止拖动时，文档将被复制，您的窗口上有一个文档，屏幕上有一个文档。屏幕上的那个不能被复制，而是可以被拖动。我该怎么做呢？
浏览 0提问于2019-05-14得票数 0
回答已采纳
1回答
如何找到拖放元素相对于可下垂区域的位置？
javascript、html、html5-draggable
我在查找拖放元素相对于它的父容器的位置时遇到了问题。我有一个“职位:相对”部门，我认为这是一个‘可下垂的地区’。在这个div中，我有几个“位置:绝对”图像元素，我已经标记为可拖放。要设置元素的位置，我在'dragend‘上有一个侦听器。下面你可以看到我的</e
浏览 2提问于2015-09-30得票数 3
1回答
父级可以使所有的孩子都是可拖动的，当单击子时，它们是可拖的和可排序的。
javascript、jquery、jquery-ui
如果单击父元素，则希望使所有子元素都具有可拖动性，即当单击父元素时，尝试拖动其所有子元素，如果单击子元素，则只能拖动其子元素。我正在使用下面的代码，但它只适用于子元素，当我试图从父元素中拖动所有子元素时，可以完成 $(".droppable>div").sortable({
connect
浏览 1提问于2014-05-02得票数 0
4回答
Javascript拖放:当可拖放对象具有固定或绝对位置时，它会消失在可拖放区域后面
javascript、jquery、css、jquery-ui-draggable、jquery-ui-droppable
我的问题如下:我想在另一个div区域中拖放元素。我在这个特定的例子中使用了jquery的draggable和droppable元素。({helper:'clone'}); $( "#droppable"
浏览 0提问于2013-02-21得票数 4
回答已采纳
1回答
区分不同的可放元素(jQuery拖放)
javascript、jquery、css、drag、interactive
我们有2个dropzones和3个dropzones元素。每当可放元素a被拖到dropzone时，它现在都会在可放元素b被拖放时显示相同的内容。(删除它会添加一个类，将显示块添加到隐藏内容中以显示)$( "#draggable
浏览 1提问于2016-04-21得票数 0
3回答
在父框架和子框架之间可排序和可拖动的Jquery
javascript、jquery、jquery-ui、jquery-ui-sortable、jquery-ui-draggable
我正在尝试实现父框架和子框架之间的jQuery Draggable|Droppable|Sortable。('sortable');console.log(element); connectToSortablediv/>").css('background-color'
浏览 0提问于2013-02-18得票数 5
回答已采纳
1回答
使用JQUERY进行拖动和交换
javascript、jquery、html、css、jquery-ui
我需要从两个DIV中拖动和交换内容，我已经尝试了以下工作，并正确地将内容交换到可拖放的DIV，但留下可拖拽的DIV空白。var draggable = ui.draggable; $(this).empty(); $
浏览 0提问于2016-12-11得票数 0
2回答
在可拖动的jQuery中设置多个容器
javascript、jquery、jquery-ui、jquery-plugins、draggable
我正在创建一个页面上带有一些元素的管理应用程序。这些元素可以拖来拖去。但在页面中，你有两个单独的地方可以拖动它。
那么，有没有一种方法可以在jQuery draggeble的包含选项中设置多个类？
浏览 0提问于2011-04-06得票数 1
回答已采纳
8回答
jquery可丢弃接受
javascript、jquery、droppable
谁能告诉我如何在接受条件下写一个函数，然后它如何知道什么是接受的，什么是不接受的。例如，我想在accept条件下接受div a和div b。我如何通过一个函数来编写I？
浏览 0提问于2009-09-18得票数 25
3回答
使用jQuery UI成功删除可删除的功能
jquery、jquery-ui
我有以下代码，它允许您在页面上拖放元素，并在成功拖放时运行一个名为saveRatings的方法，传递元素的ids。$('.draggable').draggable({ });
drop: function( even
浏览 0提问于2012-08-08得票数 5
回答已采纳
1回答
如何使用可拖动和可选的JQuery将一个或多个项拖动到元素中
javascript、jquery、jquery-ui
我想知道如何将一个或多个项目(个人记录，通过他们的头像照片)拖到目标(在我的例子中是一个城市列表)，然后用被拖到的项目的详细信息更新数据库。<ul> <span>Sydney</span><
浏览 5提问于2014-06-01得票数 6
回答已采纳
1回答
函数在对象拖放后无法工作。
jquery、html、drag-and-drop
红色X应该通过淡出父div来删除单击时的项。当元素位于右边的灰色框中时，它就可以工作了，但是在删除之后，delete函数就不再工作了。如何将此操作用于已移动到左边的框中的项目？谢谢。$(document).ready(function(){ revert: "invalid",
stack: ".
浏览 1提问于2018-07-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
