简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - js怎样实现用鼠标中键拖拽div?
怪我咯
怪我咯 2017-04-10 16:41:12
0
6
361

做一个在线图片浏览的网页，因为鼠标左右键都被占用了，想用js实现类似于AutoCAD那种用鼠标中键就可拖放图片的功能，找了很久都没找到相关方面的资料，这个应该怎样实现?

怪我咯
怪我咯

走同样的路，发现不同的人生

全員に返信(6)
Ty80
Ty802017-04-10 16:43:12 6棟

鼠标移上去的时候判断是否点击了鼠标中键，然后再进行拖拽事件
不知道是不是这样？

いいねを押す +0
返信を追加
小葫芦
小葫芦2017-04-10 16:43:12 5棟

每一个鼠标事件event对象都有一个button属性，通过button属性指定是哪个键按下

いいねを押す +0
返信を追加
阿神
阿神2017-04-10 16:43:12 4棟 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">                                                                                                                     
#box{position:absolute; left:100px; top:100px; padding:5px; background:#f0f3f9; font-size:12px; -moz-box-shadow:2px 2px 4px #666666; -webkit-box-shadow:2px 2px 4px #666666;}
#main{border:1px solid #a0b3d6; background:white;}
#bar{line-height:24px; background:#beceeb; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}
#content{width:420px; height:250px; padding:10px 5px;}
</style>

<script>
var params = {
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false
};

var getCss = function(o,key){
    return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];     
};


var startDrag = function(bar, target, callback){
    if(getCss(target, "left") !== "auto"){
        params.left = getCss(target, "left");
    }
    if(getCss(target, "top") !== "auto"){
        params.top = getCss(target, "top");
    }

    bar.onmousedown = function(event){
        params.flag = true;
        if(!event){
            event = window.event;
            
            bar.onselectstart = function(){
                return false;
            }  
        }
        var e = event;
        params.currentX = e.clientX;
        params.currentY = e.clientY;
    };
    document.onmouseup = function(){
        params.flag = false;    
        if(getCss(target, "left") !== "auto"){
            params.left = getCss(target, "left");
        }
        if(getCss(target, "top") !== "auto"){
            params.top = getCss(target, "top");
        }
    };
    document.onmousemove = function(event){
        var e = event ? event: window.event;
        if(params.flag){
            var nowX = e.clientX, nowY = e.clientY;
            var disX = nowX - params.currentX, disY = nowY - params.currentY;
            target.style.left = parseInt(params.left) + disX + "px";
            target.style.top = parseInt(params.top) + disY + "px";
        }
        
        if (typeof callback == "function") {
            callback(parseInt(params.left) + disX, parseInt(params.top) + disY);
        }
    }    
};
</script>
</head>
<body>
<p id="box">
    <p id="main">
        <p id="bar">拖拽我吧～</p>
        <p id="content">乖～</p>
    </p>
</p>
<script>
var oBox = document.getElementById("box");
var oBar = document.getElementById("bar");
startDrag(oBar, oBox);
</script>
</body>
</html>

我给你一个Demo。

いいねを押す +0
返信を追加
Peter_Zhu
Peter_Zhu2017-04-10 16:43:12 3棟

说一下我的想法，希望能提供一些思路。

拖拽的过程无非是 鼠标按键按下->鼠标移动->鼠标按键释放 三个步骤，只要分别监听这三个事件并记录一些数据就行了。

我们把所有事件委托到window 对象上，并假定有一个全局变量 var Store = {};。

一、当鼠标按下时 （window.onmousedown 事件）：

  1. 通过 event.target 来判断当前被按住的元素是否可以被拖拽，如果是执行第2步，否则直接返回。

  2. 保存当前被按住的元素的原始位置 Store.originalTop = ?, Store.originalLeft = ? （被按住的元素的 style.position 应该为 absolute）

  3. 通过 event 对象获取按下时鼠标所在的位置 event.pageX, event.pageY， ... 也可以取一些其他你感兴趣的值。把取到的值保存在Store中。

  4. 设置拖拽标志为真 Store.isDragging = true。

二、当鼠标移动时（window.onmousemove 事件）:

  1. 判断 Store.isDragging === true 是否成立，如果成立，执行第2步，否则直接返回。

  2. 通过 event.pageX, event.pageY， ...，获取当前鼠标位置。 把得到的值与之前保存在 Store 中的相减，以确定鼠标分别在 x,y方向上的偏移量，然后通过得到的偏移量和之前保存在Store 中的 originalTop 和 originalLeft 来更新被拖拽的元素的位置。

三、当鼠标释放时（window.onmouseup 事件）:

  1. 设拖拽标志为假 Store.isDragging = false.

いいねを押す +0
返信を追加
大家讲道理
大家讲道理2017-04-10 16:43:12 2棟

这个问题很简单，你需要去买一个雷蛇或者低端一点的国产鼠标（带宏设置的）安装好驱动，将鼠标中间宏定义为鼠标左键，然后中间和左键的功能也就是一样的了。
这样你就可以使用楼上的方法来实现这样的功能。
不行你捅了我。。

いいねを押す +0
返信を追加
左手右手慢动作
左手右手慢动作2017-04-10 16:43:12 1棟

html5不是有现成的拖拽功能吗?

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！