div
divcss
when dragging to the middle left, there is also a dotted frame on the left, and when you let go, the dragged div is docked on the left.
if you drag to the middle right, the dragged div will dock to the right when you let go.
[if my description is not detailed enough, you can open the Baidu home page and check it after logging in to the Baidu account]
this complicated process, how is it realized, ladies and gentlemen?
this has nothing to do with the mvvm framework like vue, which is to add some view-layer logic to the native drag-and-drop events provided by the browser, which is what you want to know, right?
first of all, let's briefly talk about what the elements you see are actually:
placeholder . It may be a div, followed by a virtual box, and that's all mirror , it may also be a div or something, and then add a drag effect style first put these two elements on the page and hide them at the same time.
then use the browser's drag event (drag, dragStart, dragOver, which can be checked on MDN for details, to abstract the drag process, for example, from right to left:
my description is biased towards the dom layer. If you do it with vue, you can abstract the logic of the moving elements to the data layer.
but then again, this kind of drag-and-drop is actually a relatively common interaction, so there are a large number of off-the-shelf toollibraries, and I recommend a draggable . If you are interested, you can take a look at the source code of these libraries, which is basically similar to what I described above, except that the events that implement the drag-and-drop process may not be simulated by mouse events such as drag/drop, but by mouse events such as mouseup/mouseover/mousedown, but they are more or less the same.
at the same time, the whole process of dragging is an event-driven business scenario, so it would be better to use some responsive aids, such as rxjs, dealing with multiple asynchronous events at the same time.
hotspotinformation hotspotsmessage the current requirement is that 16 pieces of data are randomly obtained from hotspotmessage, and then it is shown that the calculation attribute hotspots has implemented this requirement. now I want to click on t...
www.zingpower.co excuse me, recently I want to start to learn that vue, wants to reconstruct the above website with Vue. There are more design aspects of this website, such as the switching of clicks on pictures, the animation of pictures, the impleme...
such as the question, it has been monitored in main.js and created,mounted at present, but there is no response. setTimeout (function () {throw new Error}, 1000). If a new error is delayed after one second, the error event will respond. Now I have an e...