js實現可拖拽的div

阿新 • • 發佈：2019-01-20

可拖動DIV層的實現方法

http://blog.csdn.net/twoByte/article/details/73269653

http://www.cnblogs.com/zhuzhenwei918/p/6569295.html

實現一個div可以被拖拽，程式碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>zzw_drap</title>
    <style>
        * {
            margin:  
0;
            padding: 0;
        }
        #box {
            position: absolute;
            top: 100px;
            left: 200px;
            width: 500px;
        }
        #bar {
            padding-left:50px; 
            height: 50px;
            line-height: 50px;
            color: white;
            background 
-color: #aaa;
            cursor: move;
        }
        #content {
            padding:30px 0 0 50px ;
            height: 300px;
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="bar">可拖拽頭部</div>
        <div id=" 
content">這裡是內容</div>
    </div>

    <script>


    /*
    * zzw.drag 2017-3
    * js實現div可拖拽
    * @params bar 可以點選拖動的元素
    * @params box 拖動的整體元素 必須是position: absolute;
    * 思想：滑鼠的clienX/clientY相對值設定為父元素的left/top的相對值
    */

    var dragBox = function (drag, wrap) {

       function getCss(ele, prop) {
            return parseInt(window.getComputedStyle(ele)[prop]);
       }

       var initX,
           initY,
           dragable = false,
           wrapLeft = getCss(wrap, "left"),
           wrapRight = getCss(wrap, "top");

       drag.addEventListener("mousedown", function (e) {
            dragable = true;
            initX = e.clientX;
            initY = e.clientY;
       }, false); 

      document.addEventListener("mousemove", function (e) {
            if (dragable === true ) {
                var nowX = e.clientX,
                    nowY = e.clientY,
                    disX = nowX - initX,
                    disY = nowY - initY;
                wrap.style.left = wrapLeft + disX + "px";
                wrap.style.top = wrapRight + disY + "px";
            }
       });

       drag.addEventListener("mouseup", function (e) {
            dragable = false;
            wrapLeft = getCss(wrap, "left");
            wrapRight = getCss(wrap, "top");
       }, false); 

    };

    dragBox(document.querySelector("#bar"), document.querySelector("#box"));
    </script>
</body>
</html>

其中我們可以直接使用封裝好的函式，它接受兩個引數，第一個是可以點選拖拽的元素，第二個是父元素。注意：父元素的postion設定為 absolute才可以使用。

2017年8月31日更新：

這裡的mousemove的監聽物件修改為了document，否則，如果我們拖拽速度太快，會出現bug，即可能滑鼠脫離了wrap，然後這時就會出現問題，而如果修改為了document，問題幾乎得到了解決。

js實現可拖拽的div

可拖動DIV層的實現方法 http://blog.csdn.net/twoByte/article/details/73269653 http://www.cnblogs.com/zhuzhenwei918/p/6569295.html 實現一個div可以被拖拽，程

JS-實現可拖動的div；實時監聽input標籤value變化

實現可拖動的div var mover = new Mover(document.getElementById("header")); // js封裝：實現可拖動的div. function Mover(title) { this.obj = title; this.st

javascript實現可拖動DIV層

百度 -i osi sil weight 拖動 oev solid col 原文發布時間為：2009-05-04 —— 來源於本人的百度文章 [由搬家工具導入]注意以下红色部&

實現可拖拽移動的懸浮按鈕

前言：　　最近想要實現一個可拖拽移動的FAB按鈕，這裡記錄一下個人的思路與經驗。如何監聽FAB按鈕的移動？　　我們可以實現View.OnTouchListener介面，在onTouch( )方法中獲取FAB按鈕移動時的位置引數。或者可以選擇複寫View自身的onT

Android實現可拖拽的懸浮框

前言：最近遇到一個開發需求，機器人在使用ASR(語音識別)時，需要將使用者說的話，在機器人胸前的互動螢幕上展示出來，也就是展示出相應的字幕。關鍵有一個要求就是可將字幕進行拖拽。。。(怎麼樣，這個需求夠變態吧，雖從正常互動的角度認為這樣完全沒必要，並簡單交涉了下，結果很無奈，你懂得。

js實現可拖動的佈局

思路：採用flex佈局，js即時修改固定列的寬度注意：父元素需設定position:relative；因offsetLeft和offsetTop是相對於具有定位的（position:absolute或者position：relative）父級元素的距離 html： <!DOCTYPE ht

js實現簡單拖拽案例

簡單拖拽事件主要是監聽三個事件：onmousedown, onmousemove, onmouseup 三個事件，思路也很簡單，但是寫的時候還是遇到了一些小問題，先放程式碼： <!DOCTYPE html> <html lang="en"> <head>

使用angular-ui-sortable實現可拖拽排序列表

專案需求，新增列表可拖拽排序功能，谷歌了一下，找到一個Angular的外掛：angular-ui-sortable，專案地址：https://github.com/angular-ui/ui-sortable需要在之前引入jquery，和jquery-ui，否則無法使

JavaScript 在vue頁面下實現滑鼠拖拽div改變其大小，適用於鷹眼地圖，街景地圖等。

首先看效果，如圖，滑鼠懸浮在地圖的右上角小框中時，提示“拖動調整大小”，可以給小框加個好看的圖示。點選可以進行拖拽。基於上一篇部落格：https://blog.csdn.net/acoolgiser/article/details/84866426 實現。程式碼：

js實現檔案拖拽上傳並顯示待上傳的檔案列表

首先實現html頁面的內容:<body> <div name="single" style="text-align: center; "> <A class=btn_addPic href="javascript:void

原生JS實現圖片拖拽移動與縮放

rgb asc col ice head () etl ini size <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name

原生js實現React拖拽效果（resize）附帶完整的demo

想找一個可以resize塊的元件，找了好幾天都沒找到合適的。嘗試過的開源元件： “react-rnd”：被拖拽的塊採用的佈局方式是“position:absolute”,更改佈局的話拖拽的事件會失效，沒有仔細去研究原理。但是我是在不知道這個佈局怎麼去比較好

js實現滑鼠拖拽功能基本思路

如果要設定物體拖拽，那麼必須使用三個事件，並且這三個事件的使用順序不能顛倒。 onmousedown：滑鼠按下事件onmousemove：滑鼠移動事件onmouseup：滑鼠擡起事件拖拽的基本原理就是根據滑鼠的移動來移動被拖拽的元素。滑鼠的移動也就是x、y座

原生js實現節點拖拽

var Drags = function (element, callback) { callback = callback || function () {}; var params = {

js實現可視化區域內拖拽

posit scrip red off initial cti false top wid <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /&g

JavaScript：用原生js實現重力條件下，可拖拽小球的碰撞運動

本次用原生js，在小球的碰撞運動上添加了重力效應。並且可以拖拽小球，拖拽的方向和力度大小，決定了小球的初始速度和運動方向蠻有趣的，大家可以拷貝程式碼試一試。程式碼也附帶了一些小注釋。 <!DOCTYPE html> <html lang="en"> &l

C# winfrom 如何實現子窗體在主界面裏可伸縮可拖拽

看電影味道沒有貴賓電影悲傷都是窗體先生愛情的滋味是澀的，比最青的果還要澀；愛情的滋味是甜的，比最濃的蜜還要甜；愛情的滋味是酸的，比最嫩的葡萄還要酸；愛情的滋味是苦的，比最老的黃蓮還要苦。在愛情裏，什麽滋味都有，愛，恨，快樂，痛苦，欣悅，悲傷，種種味道，沒一

小程序開發如何實現視頻或音頻自定義可拖拽進度條

text 完成我們控制轉載產品結構可拖拽 step 程序原生組件的音頻播放時並沒有進度條的顯示，而此次在我們所接的項目中，鑒於原生的視頻進度條樣式太醜，產品要求做一個可拖拽的進度條滿足需求。視頻和音頻提供的api大致是相似的，可以根據以下代碼修改為與音頻相關的進

js 鼠標拖拽效果實現

element width ima ado cti rem clas fun gif 效果：源碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

JS拖拽div（移動）

#dv { width:100px; height:100px; background-color:blue; border-ra

js實現可拖拽的div

相關推薦