js拖拽

最新推荐文章于 2024-03-21 13:37:25 发布
最新推荐文章于 2024-03-21 13:37:25 发布
阅读量257 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lycIT/article/details/88887744
版权

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.droptarget {
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<div class="droptarget">
    <p draggable="true" id="dragtarget">拖动我!</p>
</div>
<div class="droptarget"></div>
<script>
/* 拖动时触发 */
document.addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("Text1", event.target.id);
});
/* 拖动完成时触发*/
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});

let box = document.getElementsByClassName("droptarget");
for(let i = 0; i < box.length; i++){
    box[i].addEventListener("drop", function(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("Text1");
        event.target.appendChild(document.getElementById(data));
    });
}
</script>

</body>
</html>

 

http://www.runoob.com/try/try.php?filename=tryjsref_ondrop_dom

lycIT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS拖拽元素原理及实现代码
qczxl的专栏
12-03 1万+
拖拽功能主要是用在让用户做一些自定义的动作，比如拖动排序，弹出框拖动移动等等，效果还是蛮不错的。下面讲解一下拖拽的原理，希望可以帮助到有需要的朋友！ 一、拖拽的流程动作 ①鼠标按下 ②鼠标移动 ③鼠标松开 二、拖拽流程中对应的JS事件 ①鼠标按下会触发onmousedown事件obj.onmousedown = function(e) { //.......... }②鼠标
three.js拖拽生成场景简单示例
09-06
在本文中，我们将深入探讨如何使用three.js库创建一个简单的拖拽生成场景的示例。three.js是一个基于WebGL的JavaScript库，它使得在浏览器中创建3D图形变得容易。结合OrbitControls.js，我们可以实现对场景中的对象...
js拖放事件详解及实战
eyes++的博客
06-12 1679
传统的拖放式根据鼠标按下松开事件完成的 HTML5对于拖放只需要在元素上面设置draggable="true"属性,移动端不支持 <div draggable="true"></div> 拖放事件： dragstart 当一个元素开始被拖拽的时候触发 drag 这个事件在拖拽源触发 dragend 拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否 dragenter...
js拖拽上传文件
qx020814的博客
11-10 1468
【代码】js拖拽上传文件。
js拖动上传
最新发布
u014708123的博客
03-21 367
在现代的Web开发中，拖动上传是一项非常常见且实用的功能。本文将向你介绍如何使用JavaScript实现拖动上传，并深入解析相关的API、代码调用方法以及注意事项。希望通过本文的科普，能帮助你更好地理解和应用这一功能。通过上述的代码调用方法和注意事项，你可以轻松地实现拖动上传功能，并根据需要进行自定义扩展。希望本文对你有所帮助！
JS 拖拽事件
本郡主是喵
09-25 944
4. 将元素拖拽放置在容器中(在容器中松开鼠标),在在容器中绑定一个ondrop 事件中,同样需要调用 e.preventDefault() 方法来阻止默认行为。2.移动鼠标(monusemove),获取移动元素中鼠标的clientX、clientY 减去上边求出的鼠标到元素边界的距离 ,求出元素移动top、left值，赋给元素。下面有2个元素,判断2个元素是否碰撞,如果碰撞的情况非常多，我们可以考虑没碰撞的情况，下面满足任意一种情况就是没碰撞的。3.松开鼠标(monuseup),将鼠标移动事件清除清除。
原生js拖拽滑动条
热门推荐
前端劝退工程师
09-28 1万+
【代码】原生js拖拽滑动条。
JS拖拽的n种例子
Benxiaohai_311的博客
03-26 2304
一、第一种 <!DOCTYPE html> <!--create by ydj on 2018-08-12--> <html> <head> <meta charset="UTF-8"> <title>拖动的水平条</title> <style> *{ margin: 0; padding: 0; } .scroll{ width: 400px;
JS拖拽排序实现
超级小胖子的博客
11-15 2646
根据JS鼠标点击事件，移动事件以及释放事件，根据各个排序排序对象距顶部距离与鼠标距顶部距离比较，根据比较结果排序，进而实现拖拽排序。
js拖拽盒子
初心
11-08 481
【代码】js拖拽盒子。
js拖拽效果
SqlloveSyn的博客
08-05 714
拖拽过程中，鼠标移动过程中，获得最新的值赋值给div的left和top值，这样div就可以跟着鼠标走了。鼠标点击div并且不松开鼠标就可以实现拖拽的效果，松开鼠标后鼠标再移动，div不会再跟着移动。鼠标的坐标减去鼠标在div内的坐标就是div的真正位置。一下代码理解了思路后也可进行更改，大致步骤就是这样。...
js.zip_imagetrans.js_javascript 拖动
09-20
本项目“js.zip_imagetrans.js_javascript 拖动”关注的就是这一领域，它结合了JavaScript库`ImageTrans.js`和`CJL.0.1.min.js`，实现了图片旋转、鼠标滚轮缩放以及可拖动的div元素等超炫功能。下面将详细介绍这些...
javascript拖拽图片到指定位置
08-14
在JavaScript和jQuery的世界里，实现图片拖放至指定位置的功能是一项常见的交互设计，它能够提升用户的体验，使得操作更加直观和便捷。以下我们将详细探讨如何使用这两种技术来完成这一任务。 首先，我们需要理解...
JavaScript 拖拽翻页效果代码
10-29
总结来说，JavaScript拖拽翻页效果结合了事件处理、CSS定位和用户交互设计，为用户提供了一种直观且富有动态感的浏览方式。通过理解和实现这样的功能，开发者可以提升网站或应用的用户体验，使其更具吸引力。
js 拖拽 流程设计器
10-10
**JavaScript拖拽流程设计器** 在Web开发中，创建交互式用户界面是提升用户体验的重要手段，而流程设计器就是其中的一种。JavaScript作为最广泛使用的客户端脚本语言，为实现这样的功能提供了强大的支持。本文将...
JS拖拽插件实现步骤
10-23
在JavaScript中实现拖拽功能是一项常见的任务，尤其在构建交互式网页时。本文将详细介绍如何创建一个JS拖拽插件，分为六个关键步骤。 一、JS拖拽插件的原理 拖拽操作的核心在于监听DOM事件，即`onmousedown`, `...
javascript实现完美拖拽效果
10-24
在JavaScript中实现完美的拖拽效果是一项常见的交互设计任务，尤其在开发网页相册或可操作的用户界面时。通过理解和应用基本的DOM操作、事件处理以及位置计算，我们可以创建一个平滑且功能丰富的拖放体验。下面将...
JavaScript实现可拖拽的拖动层Div实例
10-23
主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下
js 拖拽案例带窗口阴影效果
05-04
效果不错的js写法，需要jquery-1.11.0.min.js插件，窗口可以调整大小。
高德地图 js 拖动事件
10-13
高德地图 JS 拖动事件指的是在使用高德地图的 JavaScript API 编写代码时，通过事件监听实现地图的拖动功能。 在高德地图 API 中，可以使用`AMap.Map`类来创建地图实例，然后通过给地图实例绑定事件来监听拖动事件。 例如，通过下面的代码片段来监听地图的拖动事件： ```javascript // 创建地图实例 var map = new AMap.Map('container', { center: [116.397428, 39.90923], zoom: 13 }); // 监听地图的拖动事件 map.on('dragstart', function (event) { console.log('开始拖动地图'); }); map.on('dragging', function (event) { console.log('正在拖动地图'); }); map.on('dragend', function (event) { console.log('地图拖动结束'); }); ``` 在上面的代码中，我们首先使用`AMap.Map`类创建了一个地图实例。然后，通过`map.on`方法绑定了`dragstart`、`dragging`和`dragend`等事件，从而实现了对地图拖动事件的监听。 其中，`dragstart`事件在开始拖动地图时触发，`dragging`事件在拖动地图进行中触发，而`dragend`事件在地图拖动结束后触发。在每个事件的回调函数中，可以编写相应的逻辑来处理拖动事件。 总之，通过监听高德地图 JS 的拖动事件，我们可以在地图拖动开始、拖动中和拖动结束时执行相应的操作，从而实现更丰富的地图交互功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值