如何使用jQuery在div中多次拖放图像，以及如何在放置的div中拖放图像？
使用jQuery在div中多次拖放图像的方法有两种：基本拖放和可排序拖放。
- 基本拖放： 基本拖放是指将图像从一个div拖放到另一个div的操作。以下是实现基本拖放的步骤：
- 首先，确保你已经引入了jQuery库。
- 创建两个div，一个用作拖动源（source），一个用作拖动目标（target）。
- 在源div中添加图像，并为图像元素添加一个唯一的id属性。
- 使用jQuery的draggable()方法使源div中的图像元素可拖动。
- 使用jQuery的droppable()方法使目标div可接受拖放的图像。
- 在目标div的drop事件处理函数中，获取被拖放的图像的id，并将其添加到目标div中。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>拖放图像示例</title>
<style>
.source, .target {
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.image {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// 源div中的图像可拖动
$(".image").draggable({ containment: ".source", cursor: "move", revert: true });
// 目标div接受拖放的图像
$(".target").droppable({
accept: ".image",
drop: function(event, ui) {
var droppedImage = ui.draggable;
droppedImage.appendTo($(this));
}
});
});
</script>
</head>
<body>
<div class="source">
<div class="image" id="image1"></div>
</div>
<div class="target"></div>
</body>
</html>上述代码中，我们创建了一个源div和一个目标div，并在源div中添加了一个图像元素。图像元素的class为"image"，并具有唯一的id属性。通过调用draggable()方法和droppable()方法，实现了源div中的图像元素可拖动，目标div可接受拖放的功能。在目标div的drop事件处理函数中，将被拖放的图像元素添加到目标div中。
- 可排序拖放： 可排序拖放是指将图像从一个div拖放到另一个div，并且可以在目标div中排序的操作。这种方法需要使用jQuery UI的sortable()方法。以下是实现可排序拖放的步骤：
- 首先，确保你已经引入了jQuery库和jQuery UI库。
- 创建两个div，一个用作拖动源（source），一个用作拖动目标（target）。
- 在源div中添加图像，并为图像元素添加一个唯一的id属性。
- 使用jQuery的sortable()方法使目标div中的图像元素可排序。
- 使用jQuery的draggable()方法使源div中的图像元素可拖动。
- 使用jQuery的droppable()方法使目标div可接受拖放的图像。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>拖放图像示例</title>
<style>
.source, .target {
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.image {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
</style>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
// 目标div中的图像元素可排序
$(".target").sortable();
// 源div中的图像可拖动
$(".image").draggable({ containment: ".source", cursor: "move", revert: true });
// 目标div接受拖放的图像
$(".target").droppable({
accept: ".image",
drop: function(event, ui) {
var droppedImage = ui.draggable;
droppedImage.appendTo($(this));
}
});
});
</script>
</head>
<body>
<div class="source">
<div class="image" id="image1"></div>
</div>
<div class="target"></div>
</body>
</html>上述代码中，我们同样创建了一个源div和一个目标div，并在源div中添加了一个图像元素。通过调用sortable()方法，实现了目标div中的图像元素可排序。其他操作和基本拖放的示例相同。
总结：以上就是使用jQuery在div中多次拖放图像的方法。通过基本拖放和可排序拖放，可以实现图像在div之间的拖放操作。这些方法可以在各种项目中广泛应用，例如网页设计、应用程序开发等。腾讯云提供的云计算产品中，与前端开发相关的产品有云函数SCF、云端Web应用服务CWAS等；与后端开发相关的产品有云服务器CVM、云数据库MySQL、云存储COS等；与网络安全相关的产品有Web应用防火墙WAF、DDoS高防等。具体产品信息和介绍可以参考腾讯云的官方网站：https://cloud.tencent.com/。
相关·内容
在我的html中有两个div。一个用于拖放，另一个用于拖放。当我拖放图像时，我只能拖动一次特定的图像。我想做以下事情.. 我可以一次又一次地拖动图像(克隆)。如果我丢弃第一个图像，它应该放在相同的位置。在这之后，所有的图像都应该根据可丢弃区域的形状(如果可能的话，添加到角落)自动添加。 以下是当前的结果： Current res
浏览 16提问于2019-10-07得票数 2
回答已采纳
3回答
我设法让一个div落在另一个div的范围内，然后使它变得拖放。然而，最初的div仍然存在。我该如何躲藏或移除它？HTML：<div class="dragImg">
<img src="http://i.dailymail.co.uk/i/pix/2008/06/04/art
浏览 0提问于2014-01-30得票数 1
回答已采纳
我有一个关于拖放的问题，希望你们中的一个已经解决了。我有一个在线web应用程序，我可以在DIV上的图像上拖放注释(箭头、星形)。那么，有没有什么可行<e
浏览 1提问于2010-04-23得票数 2
0回答
如何在投放时调整图像的位置
、、、、
如何在拖放到可拖放的div中时调整图像的拖放位置？当尝试将图像放到工作区(可放置的) div中时，图像不能准确地放到它被放入的位置。下面是我用来调整图像左右位置的代码。left + workspace.outerWidth()));
topAdjust = obj.posit
浏览 8提问于2016-07-14得票数 0
3回答
我有一个由div所包含的链接的图像。我希望能够将链接的图像拖到没有其周围的DIV的tinyMCE控件中。HTML：
<div id="image_preview"><a href="somelink"><img src="someimage" /></a></
浏览 0提问于2012-04-09得票数 1
2回答
jQuery在可重排内容上拖放
、、、、
用户可以将图像拖放到编辑器中的任何位置。
该编辑器完全基于iFrame，在样式和格式化方面严重依赖于嵌套的div。现在，如果用户将图像拖放到内容的中间，我希望将拖放区上方的内容打包到一个div中，将图像放在其下方，将拖放区下面的内容打包到另一个div中，并放在图像</
浏览 0提问于2013-01-26得票数 2
回答已采纳
3回答
jquery拖放
、、
我正在使用jquery进行拖放，它在两个div中工作得很好，我可以在两个div之间拖动图像。一个div可以拖动，而另一个div可以拖放。我想要的是有4个div，其中每个div中都有图像，我可以将图像从一个div拖动到另一个div。
这在jquery中
浏览 0提问于2009-09-14得票数 1
回答已采纳
1回答
我正在创建一个用户可以drag-drop photos, resize it, drag it and rotate it的照相板。每当用户将新图像拖放到黑板上时，就会创建一个新的div元素，并将一个img标记附加到该元素。每个div都设置为向左浮动，因此每当创建新图像时，它都会自动放在正确的位置。jquery-ui插件(可调整大小和可拖动)应用于div。
当用户调整任何图像的大小
浏览 1提问于2012-10-04得票数 0
我需要一个以下问题的解决方案。在粘贴特定div中的图像后，如何将粘贴的图像作为文件对象？拖放图像后，我们可以使用下面的代码"files = e.dataTrans
浏览 2提问于2014-01-27得票数 1
1回答
我正在尝试创建一个jquery图像调色板，可以将其拖放到存储这些图像对象的div中。图像调色板充当工具生成器或工具选择器。在我的项目中，我没有任何构建区域。我只需选择一个图像对象并将其拖到存储这些图像对象的div中。我想问是否有任何JQuery插件或教程有类似的功能，或者是否有人可以帮助如何在
浏览 2提问于2012-07-14得票数 0
我发现拖放很困难(你知道，在移动的时候按住鼠标按钮)，我想提供一个“选择和拖放”，用户点击一个图标，然后再次点击画板来放置相应的元素(一张图片)。谢谢。编辑:我有两个div，一个用来选择元素的图标板，还有一个用来放置图片的绘图板。当鼠标进入绘图板时，我希望较大的图像有50%的
浏览 1提问于2009-11-05得票数 9
回答已采纳
2回答
在Div上拖放
、、、、
这就是我目前所拥有的-
我想要做的是，当一封信被拖过空白处时，它停留在该位置，并且信的原始位置是空白的，而不影响其余字母的位置，有什么建议我应该这样做，我应该将空框设置为div，或者是否有其他方法，谢谢
浏览 1提问于2012-03-12得票数 1
回答已采纳
3回答
因此，我一直在搜索inter和各种JavaScript站点，同时也在寻找JavaScript语言和apis。我的最终目标是能够拥有一个可拖动的图像，就像JQuery拖放到一个充满文本的div中，并让文本环绕它。有没有一个库或api在功能上或某个地方可以跳过？我目前正在使用JQuery的sortable来帮助移动div，但缺乏<e
浏览 0提问于2011-02-02得票数 4
回答已采纳
用户在字段中输入图像url后，img标记的值就会改变，用户可以将图像拖放到框的#centerhead部分。现在我的问题是，当img被删除后，它就消失了，我想让img标签回到它原来的位置，准备好获取另一个图像url。$("#txtURLText").attr('value', ''); });
})
浏览 0提问于2012-08-14得票数 0
回答已采纳
2回答
我有三个图像要拖放到可拖放的div中。在将图像拖放到droppable div中时，图像并未完全删除。我需要可丢弃的div作为相对位置。删除droppable div中的position属性可以很好地工作。我如何使用位置相对来实现这一点？height: 45
浏览 2提问于2016-03-16得票数 0
2回答
我无法将jquery对话框中的图像拖放到拖放区域...当它掉下来的时候它会向后移动。我修改了jquery网站上的代码，我真的不知道如何修复这个bug。class="demo">
<div id=&
浏览 0提问于2012-10-04得票数 0
我是jQuery的新手，想知道是否可以做到以下几点！
我在php中有一个图像数组，我想在一个特定的区域显示它们。从这里，我想将单个图像拖放到可放置区域，并将图像名称(路径)记录到另一个php数组中。我已经通过创建一个图像进行了实验，并且已经能够使用clone()将它拖到一个可放置的区域，这是成功的。然而，这似乎只在</e
浏览 2提问于2011-08-28得票数 0
是否有任何JQuery插件可用于拖放图像到表格布局并将表格div位置保存到数据库中？
我有一个网页，我在左边和右边有一对夫妇的图像。我想使用JQuery拖放方法来配置它。我的意思是，我应该有一个JQuery插件，我拖放图像到网页的左侧和右侧，这个位置将被保存到数据库中，以便当用户登录时，他们可
浏览 0提问于2012-06-07得票数 0
回答已采纳
1回答
类似于用户可以点击、拖动和图片从一个网站到微软word，甚至photoshop，并将图像放置到这些应用程序。我也想用文字来做同样的事情。在我的情况下，当用户单击可拖动的文本并将其放到word或notepade中时，我希望它删除存储在拖动事件中的数据。这只是纯文本。我可以处理外部应用程序中的拖放事件，只是不知道如何在拖动事件中存储
浏览 1提问于2020-05-08得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
