实现这个案例, 需要考虑到鼠标的拖拽效果 (onmousedown/onmousemove/mouseup)
拖拽分解:
按下鼠标 ----> 移动鼠标 -----> 松开鼠标
1. 给目标元素添加 onmousedown 事件, 拖拽的前提是在目标元素按下鼠标左键
2. 当 onmousedown 事件发生后, 此刻给 document 添加 onmousemove 事件, 意味着此刻鼠标在网页的移动都将改变元素的位置
3. 在 onmousemove 事件中, 设定目标元素的 left 和 top
公式:
目标元素的 left = 鼠标的 clienX - (鼠标和元素的横坐标差, 即 offsetX)
目标元素的 top = 鼠标的 clientY -(鼠标和元素的纵坐标差, 即 offsetY)
4. 当 onmousedown 发生以后, 此刻给 document 添加 onmouseup 事件, 意味着此刻鼠标在网页的任意位置松开鼠标, 都会放弃拖拽效果, 在 onmouseup 事件中, 取消 document 的 onmousemove 事件即可
当然这个小案例也用到了关于 DOM 元素系列的操作, 对于新手而言, 算一个很好的综合训练
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- 九宫格
- </title>
- <style>
- #box { height: 300px; width: 300px; position: relative; background-color:
- brown; margin: 10px auto; } span { width: 100px; height: 100px; position:
- absolute; font-size: 50px; text-align: center; line-height: 100px; color:
- #FFF; user-select: none; cursor: pointer; font-weight: bolder; } #one {
- top: 0; left: 0; background: url(./5.jpg); background-size: 100% 100%;
- } #two { top: 0; left: 100px; background: url(./7.jpg); background-size:
- 100% 100%; } #three { top: 0; left: 200px; background: url(./9.jpg); background-size:
- 100% 100%; } #four { top: 100px; left: 0; background: url(./1.jpg); background-size:
- 100% 100%; } #five { top: 100px; left: 100px; background: url(./2.jpg);
- background-size: 100% 100%; } #six { top: 100px; left: 200px; background:
- url(./4.jpg); background-size: 100% 100%; } #seven { top: 200px; left:
- 0; background: url(./3.jpg); background-size: 100% 100%; } #eight { top:
- 200px; left: 100px; background: url(./6.jpg); background-size: 100% 100%;
- } #nine { top: 200px; left: 200px; background: url(./8.jpg); background-size:
- 100% 100%; } #box .cBox { position: absolute; }
- </style>
- </head>
- <body>
- <div id="box">
- <span id="one">
- </span>
- <span id="two">
- </span>
- <span id="three">
- </span>
- <span id="four">
- </span>
- <span id="five">
- </span>
- <span id="six">
- </span>
- <span id="seven">
- </span>
- <span id="eight">
- </span>
- <span id="nine">
- </span>
- </div>
- </body>
- <script>
- var oBox = document.getElementById("box") var box = document.querySelectorAll("span");
- function Box(boxName) {
- boxName.onmousedown = function(eve) {
- var e = eve || Windows.event;
- var cSpan = document.createElement("span");
- cSpan.style.background = getComputedStyle(boxName).background;
- cSpan.style.top = boxName.offsetTop + "px";
- cSpan.style.left = boxName.offsetLeft + "px";
- cSpan.className = "cBox"oBox.appendChild(cSpan) var offsetX = e.pageX - cSpan.offsetLeft;
- var offsetY = e.pageY - cSpan.offsetTop;
- document.onmousemove = function(eve) {
- var e = eve || Windows.event;
- cSpan.style.left = e.pageX - offsetX + "px";
- cSpan.style.top = e.pageY - offsetY + "px";
- }
- document.onmouseup = function() {
- document.onmousemove = null;
- var spans = oBox.getElementsByTagName("span") var minSpan = null;
- var min = 1000;
- for (var i = 0; i < spans.length - 1; i++) {
- var span = spans[i];
- var dis = distance(cSpan, span);
- if (dis <= min) {
- min = dis;
- minSpan = span;
- }
- }
- var lsColor = getComputedStyle(minSpan).background;
- minSpan.style.background = getComputedStyle(boxName).background;
- boxName.style.background = lsColor;
- oBox.removeChild(cSpan);
- document.onmouseup = null;
- }
- return false;
- }
- }
- function distance(span1, span2) {
- var a = span1.offsetLeft - span2.offsetLeft;
- var b = span1.offsetTop - span2.offsetTop;
- var c = Math.sqrt(a * a + b * b);
- return c;
- }
- for (var i = 0; i < box.length; i++) {
- Box(box[i]);
- }
- </script>
- </HTML>
ps: 案例中的图片没有办法上传, 想要的同学可以自行百度
完整效果:
来源: http://www.bubuko.com/infodetail-3320981.html