html5学习(鼠标拖拽)

曾经终败给现在 2022-12-31 01:26 217阅读 0赞

> ** html5鼠标拖拽的效果和案例**

温故知新，许久之前写的html5的案例，重新整理了下，算是知识复习和回顾吧！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>html5学习(鼠标跟随和拖拽)</title>
    <link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
    </head>
    <body style="background-color: #CCE8CF;">
    <h3>把橘红色方块拖拽进黄色方块中去</h3>
    <div id="div1" style="width: 300px;height: 300px;background-color: Khaki;">
    </div>
    <div draggable="true" id="div2" style="width: 80px;height: 80px;background-color: OrangeRed;">
    请拖拽我
    </div>
    </body>
    <script type="text/javascript">
    var div1Node = document.getElementById("div1");
    var div2Node = document.getElementById("div2");
    
    //在拖放的过程中会触发以下事件：
    
    //在拖动目标上触发事件 (源元素): 
    //拖拽区事件
    //拖拽开始事件(ondragstart 用户开始拖动元素时触发)
    div2Node.ondragstart = function(e) {
    	console.log("***拖拽开始***", e, e.target.id);
    // 	e.dataTransfer.setData("Text", e.target.id);
    //在火狐浏览器下测试
    // 	e.dataTransfer.setData("Text", "周杰伦");
    // 	e.dataTransfer.setData("null", "");
    }
    
    //ondrag 元素正在拖动时触发
    div2Node.ondrag = function(e) {
    	console.log("***拖拽中***", e);
    }
    
    //ondragend 用户完成元素拖动后触发
    div2Node.ondragend = function(e) {
    	console.log("***拖拽完成***", e);
    }
    
    //释放目标时触发的事件: 
    //投放区事件
    //ondragenter 当被鼠标拖动的对象进入其容器范围内时触发此事件
    div1Node.ondragenter = function(e) {
    	e.preventDefault();
    	console.log("***进入投放区***", e);
    // 	div1Node.innerHTML += "***进入投放区***";
    	div1Node.style.border = "5px dotted red";
    }
    
    //ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    div1Node.ondragover = function(e) {
    	e.preventDefault();
    	console.log("***在投放区移动***", e);
    // 	div1Node.innerHTML += "***在投放区移动***";
    }
    
    //ondragleave 当被鼠标拖动的对象离开其容器范围内时触发此事件
    div1Node.ondragleave = function(e) {
    	console.log("***离开投放区***", e);
    // 	div1Node.innerHTML += "***离开投放区***";
    }
    
    //ondrop 在一个拖动过程中，释放鼠标键时触发此事件
    div1Node.ondrop = function(e) { 
    	console.log("***释放鼠标键***", e);
    	console.log("***释放鼠标键***", e, e.dataTransfer.getData("Text"));
    // 	div1Node.innerHTML += "***释放鼠标键***";
    	div1Node.appendChild(div2Node);
    }
    
    </script>
    </html>

完！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201227164737656.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221120/9248ebab4d03497d854e8e5f0876f847.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221120/50e8692d2f9144ea89e5dd179c24aef4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 3]: /images/20221120/ff71a988785e4575990dde49ed14d46f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 4]: /images/20221120/73da09188d0d46458a768876c1365a9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 5]: /images/20221120/d9d48f164a6545a08a118df6ef37976d.png