This article is published on my personal blog :cherryblog.site/. Welcome to visit this article project address, sortable plugin address: github.com/sunshine940… Demo address: github.com/sunshine940…

In writing our hypervisor we needed a drag-and-drop function, and then we had a function to swap 11 fixed divs of varying sizes, with the following effect

Final rendering

As a small rookie, I was forced to hear such news, found a plug-in on the Internet, the function is very powerful

Sortable plug-in


Sortable plug-in

Plugin address: github.com/sunshine940…

However, this plug-in can only be dragged and dropped, and cannot be exchanged. That is, it can only insert divs in front of other divs, and the rest can be moved backwards, and it cannot exchange the contents of divs, and the condition of div container remains unchanged. Then I discussed with other colleagues how to deal with the data exchange between two divs. Then the colleague says this is more troublesome = =. Need to write a dead div, and then record the content of the div before the mouse drag, and then determine the position of the mouse down, which div range, and then exchange two data = =, really do not know what pit. So I temporarily shelved this function, until one day I had to do it, I baidu “how to exchange two divs”, and then found a demo, god ~ the whole implementation process of the code is less than 50 lines, js code after a dozen lines, the whole process was solved in less than half an hour, ★,°:.☆(￣▽￣)/$:. And flowers! The effect is as follows:

Effect of the demo

Demo address: github.com/sunshine940… Check the code and find the following ideas:

  1. Ondragstart (triggered when the user starts dragging an element) uses the object’s datatransfer. setData method and records the div clicked with an intermediate quantity
  2. Ondragover (this event is triggered when an object is dragged within the scope of another object container), which prevents the default event of dragging when dragging a div (the default behavior of the drop event is to open as a link)
  3. Ondrop (this event is triggered when the mouse key is released during a drag) swaps the HTML of two divs

Drag and drop

The code for this example is as follows

<! DOCTYPE html> <! DOCTYPE HTML> <html> <head> <styletype="text/css">
        #div1
        {float:left; width:100px; height:35px; margin:10px; padding:10px; border:1px solid#aaaaaa; }
        #div2
        {float:left; width:200px; height:135px; margin:10px; padding:10px; border:1px solid#aaaaaa; }

    </style>
    <script type="text/javascript">
        function allowDrop(ev)
        {
            ev.preventDefault();
        }

        var srcdiv = null;
        function drag(ev,divdom)
        {
            srcdiv=divdom;
            ev.dataTransfer.setData("text/html",divdom.innerHTML);
        }

        function drop(ev,divdom)
        {
            ev.preventDefault();
            if(srcdiv ! = divdom){ srcdiv.innerHTML = divdom.innerHTML; divdom.innerHTML=ev.dataTransfer.getData("text/html");
            }
        }
    </script>
</head>
<body>

<div id="div1" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> <p>ni hao! </p> </div> <div id="div2" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> <p>Hello world! </p> </div> </body> </html>Copy the code

Drag and drop is a common feature where you grab an object and drag it to another location. In HTML5, drag and drop is part of the standard, and any element can be dragged and dropped.

Set elements to drag-and-drop

First, to make the element dragable, set the draggable property to true:

Set onDragStart and save the data

The onDragStart property calls a function, drag(event,this), which specifies the data to be dragged. The datatransfer.setData () method sets the data type and value of the data being dragged; in this case, the data type is “text/ HTML “and the value is the innerHTML of the dragable element

function drag(ev,divdom){
   srcdiv=divdom;
   ev.dataTransfer.setData("text/html",divdom.innerHTML);
}Copy the code

Where to put it? – Ondragover

The onDragover event specifies where to place the dragged data. By default, data/elements cannot be placed in other elements. If we want to set to allow placement, we must prevent the default handling of elements. This is done by calling the event.preventDefault() method of the ondragover event: event.preventDefault()

function allowDrop(ev){
   ev.preventDefault();
}Copy the code

To place – ondrop

A DROP event occurs when data is dropped. In the example above, the ondrop attribute calls a function, drop(event) :

 function drop(ev,divdom){
    ev.preventDefault();
    if(srcdiv ! = divdom){ srcdiv.innerHTML = divdom.innerHTML; divdom.innerHTML=ev.dataTransfer.getData("text/html"); }}Copy the code