js to achieve simple drag effect

js to achieve simple drag effect

This article shares the specific code of js to achieve a simple drag effect for your reference. The specific content is as follows

1. Basic effects of dragging

Ideas:

When the mouse is pressed on the box, it is ready to move (the event is added to the object)

When the mouse moves, the box follows the mouse (the event is added to the page)

When the mouse is lifted, the box stops moving (the event is added to the page)

var o = document.querySelector('div');
 
        //Mouse down o.onmousedown = function (e) {
            //Mouse position relative to the box var offsetX = e.clientX - o.offsetLeft;
            var offsetY = e.clientY - o.offsetTop;
            //Mouse movement document.onmousemove = function (e) {
                o.style.left = e.clientX - offsetX + "px";
                o.style.top = e.clientY - offsetY + "px";
            }
            //Mouse up document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }

2. Drag and drop issues

If text appears in the box, or the box itself is an image, due to the default behavior of the browser (text and images can be dragged), we can set return false to prevent its default behavior. However, this interception of default behavior is not applicable in lower versions of IE. You can use global capture to solve the IE problem.

Global capture

Global capture is only applicable to lower versions of IE.

<button>btn1</button>
    <button>btn2</button>
    <script>
        var bts = document.querySelectorAll('button')
 
        bts[0].onclick = function () {
            console.log(1);
        }
        bts[1].onclick = function () {
            console.log(2);
        }
 
        // bts[0].setCapture() //Add global capture // bts[0].releaseCapture() ; //Release global capture</script>

Once a global capture is added for a specified node, other elements on the page will not trigger the same type of event.

3. Full version of drag and drop

var o = document.querySelector('div');
 
        //Mouse down o.onmousedown = function (e) {
            if (o.setCapture) { //IE lower version o.setCapture()
            }
            e = e || window.event
            //Mouse position relative to the box var offsetX = e.clientX - o.offsetLeft;
            var offsetY = e.clientY - o.offsetTop;
            //Mouse movement document.onmousemove = function (e) {
                e = e || window.event
                o.style.left = e.clientX - offsetX + "px";
                o.style.top = e.clientY - offsetY + "px";
            }
            //Mouse up document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
                if (o.releaseCapture) {
                    o.releaseCapture(); //Release global capture}
            }
            return false; //Default behavior of standard browsers}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • JQuery Dialog (JS modal window, draggable DIV)
  • Analysis of how to use Sortable.js drag and drop sorting
  • js to achieve drag effect
  • JavaScript implements touch screen drag function on mobile terminal
  • Simple drag effect implemented using js
  • JS realizes beautiful window drag effect (can change size, maximize, minimize, close)
  • Example of file drag and drop upload function implemented by JS
  • Using javascript to implement mouse drag events
  • JS component Bootstrap Table table row drag effect implementation code
  • JavaScript implements horizontal progress bar drag effect

<<:  js to achieve floor scrolling effect

>>:  Example code for converting http to https using nginx

Recommend

Examples of common Nginx misconfigurations

Table of contents Missing root location Off-By-Sl...

Example of CSS3 to achieve div sliding in and out from bottom to top

1. First, you need to use the target selector of ...

7 Ways to Write a Vue v-for Loop

Table of contents 1. Always use key in v-for loop...

CSS and JS to achieve romantic meteor shower animation

1. Rendering 2. Source code HTML < body > &...

ReactHooks batch update state and get route parameters example analysis

Table of contents 1. How to update in batches Con...

Detailed explanation of how to automatically add prefix plugin after CSS3 packaging: autoprefixer

The project scaffolding built with vue-cli has al...

Div css naming standards css class naming rules (in line with SEO standards)

There are many tasks to be done in search engine o...

MySQL Oracle and SQL Server paging query example analysis

Recently, I have done a simple study on the data ...

How to set an alias for a custom path in Vue

How to configure custom path aliases in Vue In ou...

A brief talk about cloning JavaScript

Table of contents 1. Shallow cloning 2. Deep clon...

Detailed explanation of Javascript basics loop

Table of contents cycle for for-in for-of while d...

Vue binding object, array data cannot be dynamically rendered case detailed explanation

Project scenario: Dark Horse Vue project manageme...

JavaScript to achieve the effect of clicking on the self-made menu

This article shares the specific code of JavaScri...

HTML table tag tutorial (35): cross-column attribute COLSPAN

In a complex table structure, some cells span mul...

Detailed explanation of the basic implementation principle of MySQL DISTINCT

Preface DISTINCT is actually very similar to the ...