Home > Developer > JavaScript
JS enables ultra-simple mouse dragging, while js enables mouse dragging
This article describes how JS achieves ultra-simple mouse dragging. We will share this with you for your reference. The details are as follows:
Use JavaScript code as short as possible to write a JS drag. The function itself contains 287 characters... It can be shorter if compatibility and variable encapsulation are not considered.
The running effect is as follows:
The Online Demo address is as follows:
Http://demo.jb51.net/js/2015/js-s-drug-demo/
The Code is as follows:
<Title> write a JS drag as short as possible </title> <body> <div id = "demo" style = "width: 100px; height: 100px; position: absolute; background-color: silver; "> </div> <script> function dragable (id) {var d = document, o = d. getElementById (id), s = o. style, x, y, p = 'onmousemove '; o. onmousedown = function (e) {e = e | event; x = e. clientX-o.offsetLeft; y = e. clientY-o.offsetTop; d [p] = function (e) {e = e | event; s. left = e. clientX-x + 'px '; s. top = e. clientY-y + 'px '}; d. onmouseup = function () {d [p] = null }}dragable ("demo"); </script>
I hope this article will help you design JavaScript programs.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
