Today we will take a look at how to prevent dragging objects from being dragged out of a certain div and dragging adsorption function.
Last time, we talked about our dragging and dropping, we cannot drag out of the visual area. On this basis, we add a parent div to prevent it from dragging out of the parent. The principle is the same as before, it's simple.
html code:
<div id="div2"> <div id="div1"> </div> </div>
css code:
<style type="text/css"> #div1 { width: 100px; height: 100px; background: red; position: absolute; } #div2 { width: 400px; height: 300px; background: #CCCCCC; position: relative; } </style>javascript code:
<script type="text/javascript"> // Drag and drop empty div. Low version of Firefox has bug window.onload = function() { var oDiv = document.getElementById("div1"); var oDiv2 = document.getElementById("div2"); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { var oEvent = ev || event; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function(ev) { var oEvent = ev || event; // Store the current location of the div var oDivLeft = oEvent.clientX - disX; var oDivTop = oEvent.clientY - disY; if (oDivLeft < 0) { oDivLeft = 0; } else if (oDivLeft > oDiv2.offsetWidth - oDiv.offsetWidth) { oDivLeft = oDiv2.offsetWidth - oDiv.offsetWidth; } if (oDivTop < 0) { oDivTop = 0; } else if (oDivTop > oDiv2.offsetHeight - oDiv.offsetHeight) { oDivTop = oDiv2.offsetHeight - oDiv.offsetHeight; } oDiv.style.left = oDivLeft + 'px'; oDiv.style.top = oDivTop + 'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; return false; // Block the default event and resolve the Firefox bug }; }; </script>The renderings are as follows:
It's simple.
The next thing is how to make it automatically absorb.
In fact, this is often used by people. For example, when there is a small window in Ps dragging it to the edge of the page, it will automatically attach it.
How can our drag and drop have such a function?
This was actually mentioned during exercise before. It’s like taking a taxi and you can’t let the driver park there exactly. He must be parked near the destination.
The same goes for the program. Just as it is almost time to get there, it can be assigned directly. Suppose the object I dragged is 50px away from the left, I think it is on the left, and if the value is directly assigned to 0, it will automatically adsorb.
The principle is very simple, let’s see how the code is implemented. Just make a little modification
<script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); var oDiv2 = document.getElementById("div2"); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { var oEvent = ev || event; disX = oEvent.clientX - oDiv.offsetLeft; disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function(ev) { var oEvent = ev || event; var oDivLeft = oEvent.clientX - disX; var oDivTop = oEvent.clientY - disY; // When left is less than 50, it will automatically be 0. This will realize adsorption if (oDivLeft < 50) { oDivLeft = 0; } else if (oDivLeft > oDiv2.offsetWidth - oDiv.offsetWidth) { oDivLeft = oDiv2.offsetWidth - oDiv.offsetWidth; } if (oDivTop < 0) { oDivTop = 0; } else if (oDivTop > oDiv2.offsetHeight - oDiv.offsetHeight) { oDivTop = oDiv2.offsetHeight - oDiv.offsetHeight; } oDiv.style.left = oDivLeft + 'px'; oDiv.style.top = oDivTop + 'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; return false; }; }; </script>Next time, we will talk about advanced applications, which will be more responsible and useful. Our drag and drop function has been improved.
For example, dragging pictures and selecting text. For example, there is only one div on the drag page we are currently using, which we will not encounter in normal development.
In fact, when there is something on the page, what problems will happen with this drag? ? ?
Will be resolved next time ~ Please look forward to it