div拖拽

時間 2019-11-12

標籤 div 欄目 CSS 简体版

原文原文鏈接

分析邏輯關於該過程有一下3個動做javascript

一、點擊二、移動三、釋放鼠標css

一、點擊時得到點擊下去的一點的座標（盒子的top，left），去除默認事件。java

二、移動時不斷改變盒子的座標。（移動的dom目標應該爲document否則容易被甩出去）。dom

三、鼠標釋放。清除document的時間。還有改變位置。this

四、注意若是鼠標在點擊目標時速度太快離開了目標，要立刻糾正。blog

寫了個簡單的方法：seo

<style type="text/css">
*{margin: 0; padding: 0;}
 #box{width: 300px; height: 200px; border:1px solid #999; position: fixed; top: 20px; left: 20px;}  
 #header{width: 100%; height: 50px; background-color: #999;} 
</style>
<body>
<div id="box">
    <div id="header"></div>
    <div>
        <p>2222222222222222222222222222222121212121212</p>
        <p>2222222222222222222222222222222121212121212</p>
        <p>2222222222222222222222222222222121212121212</p>
        <p>2222222222222222222222222222222121212121212</p>
        <p>2222222222222222222222222222222121212121212</p>
    </div>
</div>
<script type="text/javascript">
var box = document.getElementById('box');
var header = document.getElementById('header');
new fnDrag(header,box);
</script>

這是我簡單分裝的一個方法：事件

/**
 *
 用於拖拽
 *
 @method fnDrag
 *
 @param {DOM} select 點擊可觸發拖拽的區域
 *
 @param {DOM} container 移動的區域
 *
 created by toMatthew on 17/11/27.
 *
 usage new fnDrag(header, container);
 *
 */
;(function(win, document){
    // 公用方法開始
    // 返回元素位置
    function toBoxPosition(dom, x, y) {
        var moveBox = dom.getBoundingClientRect();///包圍盒的信息
        return {x: parseInt(x - moveBox.left), y: parseInt(y - moveBox.top) };
    }

    var fnDrag = function(select, container) {
        var self = this;
        self.select = select;
        self.container = container;
        self.isMouseDown = false;
        self.point = {x:0,y:0};

        self.getPosition = function(e) {
            if(self.isMouseDown) {
                self.container.style.top = parseInt(e.clientY - self.point.y)+'px';
                self.container.style.left = parseInt(e.clientX - self.point.x)+'px';
            }
        }

        self.bodyMove = function(e) {
            e.preventDefault();
            self.getPosition(e);
        }

        self.fnClear = function(e) {
            document.removeEventListener('mousemove', self.bodyMove);
            document.removeEventListener('mouseup', self.fnMouseUp);
            self.select.removeEventListener('mouseout', self.bodyMove);
            self.select.removeEventListener('mouseup', self.fnMouseUp);
        }

        self.fnMouseUp = function(e) {
            if(self.isMouseDown) {
                e.preventDefault();
                self.isMouseDown = false;
                self.fnClear(e);
            }
        }

        // 監聽select區域點擊
        self.select.addEventListener('mousedown', function(e) {
            e.preventDefault();//阻止默認事件，取消文字選中 
            self.isMouseDown = true;
            self.point = toBoxPosition(self.container, e.clientX , e.clientY);

            // 監聽body移動
            document.addEventListener('mousemove', self.bodyMove, false);

            // 移出select區域
            self.select.addEventListener('mouseout', self.bodyMove, false);

            // 鼠標擡起
            self.select.addEventListener('mouseup', self.fnMouseUp, false);
            document.addEventListener('mouseup', self.fnMouseUp, false);

        }, false);
    }

    win.fnDrag = fnDrag;
})(window, document);

1. div拖拽
2. 可拖拽div
3. div 拖拽佈局
4. 實現Div拖拽
5. div的拖拉拽
6. 純js實現DIV拖拽
7. div拖拽效果 JQuery
8. 鼠標拖拽div元素
9. 拖拽調整Div大小
10. 用類實現拖拽div
更多相關文章...
• jQuery Mobile swiperight 事件 - jQuery Mobile 教程
• jQuery Mobile swipeleft 事件 - jQuery Mobile 教程
• 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。