JavaScript拖拽，凑个热闹

很久没来写点什么了，最近看到园子里面做拖拽的人特别多，突然兴起，也就写了这么个拖拽的脚本。刚刚找了找看，发现原来拖拽这种常见的效果已经有了N篇文章M种办法。不过这里还是要分享一下我的这个drag.js。也许哪天您寻找的时候发现您需要的就是这种拖拽。

说了这么多，首先阐释一下这个拖拽脚本的实现原理，以备大家在二次开发的时候能够有充分地认识，也便于大家发现这其中可能存在的问题。（本人对HTML方面并不特别熟悉，或许我的思路并不合适，仅做练手。）

首先随着客户端性能的显著提高以及大家对JavaScript脚本语言的不断重视，拖拽已经成了一种非常常见的效果。我们的目标则是希望开发者能够尽量地避免在实现业务代码之外还要有过多的考虑。本脚本的引用基本上解决了考虑过多代码的问题。

基本思路：

拖拽的基本动作：鼠标左键用于选择拖拽元素，鼠标位置移动用于控制拖拽元素的移动，鼠标释放用于触发拖拽元素放置的代码（这其中可能有成功到达有效区域，也有可能会在无效区域进行鼠标释放）。 我们通过记录鼠标的初始位置，在鼠标释放的时候，检测鼠标的位置是否为有效区域，并允许执行相关事件代码用于完成其它业务逻辑。

下面先让我们看一个示例：（该示例实现了一个类似邮件拖动的过程，从邮件列表向文件夹进行拖动）

        <script type="text/javascript" src="https://files.cnblogs.com/volnet/__firefox_extension.js"></script>
        <script type="text/javascript" src="https://files.cnblogs.com/volnet/drag.js"></script>
        <style type="text/css">
            body{}{
                    -moz-user-focus:   ignore; 
                    -moz-user-input:   disabled; 

                    /**//*set the text in the firefox can't be select. equals to 

the onselectstart="return false" in IE & safari*/

 

                    -moz-user-select:   none; 
                 }
            .box{}{ background-color:#E5ECF9; width:100px; margin:5px; border:1px solid red;}
            .tag{}{ background-color:#E5ECF9; width:500px; padding:2px; padding-left:15px; border-bottom:1px solid black;}
        </style>
    <div onselectstart="return false">
        <div id="box" style="float:left;">
            <div id="box1" class="box">Inbox<span id="box1counter"></span></div>
            <div id="box2" class="box">Sent Mail<span id="box2counter"></span></div>
            <div id="box3" class="box">Drafts<span id="box3counter"></span></div>
        </div>
        <div id="list" style="float:left; padding-left:10px;">
            <div id="d1" class="tag">Facebook : Jim added you as a friend on Facebook.</div>
            <div id="d2" class="tag">Bill Gates wrote on your Super Wall!</div>
            <div id="d3" class="tag">Jason confirmed you as a friend on Facebook.</div>
            <div id="d4" class="tag">conn.cs--c# connection class</div>
        </div>
    </div>
    <script type="text/javascript" language="javascript">
        //init counter from database
        var counter = [null,0,0,0];
        //
        function setCounters(){
            var modifierLeft = "(";
            var modifierRight = ")";
            getElementById("box1counter").innerHTML = modifierLeft + counter[1].toString() + modifierRight;
            getElementById("box2counter").innerHTML = modifierLeft + counter[2].toString() + modifierRight;
            getElementById("box3counter").innerHTML = modifierLeft + counter[3].toString() + modifierRight;
        }
        setCounters();
        
        var drag1 = new drag();
        drag1.init(["d1","d2","d3","d4"], ["box1","box2","box3"], true);
        drag1.ondragend = function(){
            if(drag1.isOverBox){
                drag1.srcElement.style.display = "none";
                var o = getElementById(drag1.srcElement.id);
                o.style.display = "none";

                var n = drag1.tarElement.id.split("box")[1];
                var boxNum = isNaN(parseInt(n)) ? parseInt(n.split("counter")[0]) : parseInt(n);
                
                counter[boxNum]++;
                
                setCounters();
            }
        }
</script>

这里需要简要介绍一下本脚本的一些公开的接口以及基本的使用。

基本使用规则：

1、使用本脚本首先需要包含__firefox_extension.js，这是一个可以独立存在的脚本，适用于firefox对IE部分功能的扩展。通过《firefox extension》可以了解更多。

2、在保证了跨浏览器的一些特性被支持之后，我们可以引入本文所介绍的drag.js文件了。

3、基本的HTML准备工作。（有待测试所有的元素类型）

4、脚本初始化工作。

a.通过形如var drag1 = new drag();的方式组织一种拖拽效果。这样的方式以利于在同一页面内实现多种不同的拖拽效果。

b.通过drag1.init(beDrags,boxs,

            enabledExtNotice,enabledConstructor,unabledConstructor) 的方式初始化本拖拽对象。

beDrags:一组存在于页面中的，允许被拖动元素的ID值数组。（例如：邮件列表中的邮件）

box:一组存在于页面中的，允许被放置相应beDrags中元素的ID值数组。（例如：邮件文件夹）

[option]enabledExtNotice:布尔值true/false（默认），用于指示是否允许在拖拽对象的起始位置增加是否位于有效区域的指示。当该值为false时不增加任何提示，否则默认使用文本[OK]与[×]来标识。可以通过指定enabledConstructor和unabledConstructor两个参数来更改这两个标识。

[option]enabledConstructor:返回一个用于表示处于有效区域的元素对象，通常为一个<img>对象，或者是一个<span>对象。具体可以参看下载中的示例代码。function(){return <element>;}

[option]unabledConstructor:返回一个用于表示处于无效区域的元素对象，其性质与enabledConstructor一样，仅仅是出现的时间不同。不要求其与enabledConstructor同时为真。

其它常用属性（更多属性详见代码）：

[option]effectAllowed:用于指示被拖动对象的拖拽鼠标样式。其样式内容受限于CSS.cursor的有效属性值。

[option]dropEffect:用于指示被拖动对象位于有效区域内的样式。 其样式内容受限于CSS.cursor的有效属性值。

c. 通过设置各个事件方法，以备在合适的时候执行相应的代码。这些事件包括：

ondragstart:当鼠标刚按下拖动对象时执行该部分代码。

ondrag:当鼠标开始拖动时执行该部分代码。

ondragover:当鼠标拖动对象进入有效区域中时执行该部分代码。

ondragleave:当鼠标拖动对象离开有效区域中时执行该部分代码。

ondragend: 当鼠标释放后时执行该部分代码。

<script type="text/javascript">
<oneventhandler>:function([event]){
    //todo:execute your code here.
} 
</script>

 

d.一些有用的值（状态与当前对象等）：

srcElement:被拖动的对象。

tarElement:当被拖动对象被拖动至有效区域并未释放鼠标时，该值为当前有效区域对象。否则该值为null。

placeholder:当对象在被拖动时，会产生临时的占位符用于记录对象的旧有位置，在鼠标释放后拖拽元素将替换该临时placeholder对象，它既可以用于记录旧有位置，巧妙利用该特性可以将可以实现元素的页面拖动。（通过将placeholder置于目标区域中，即可在最终释放后将拖拽对象放置到placeholder所在位置。）

isOverBox:布尔值true/false，用于指示当前拖动是否在有效区域内部。

isMouseUp:布尔值true/false，用于指示当前鼠标是否处于释放状态。

通过以上四个步骤即可完成对拖拽的全部设置。思路是不是清晰多了呢？

下面就自己动手写一些拖拽的样例吧。

软件下载：

SVN下载：推荐|保持更新

# Non-members may check out a read-only working copy anonymously over HTTP.
svn checkout http://v-labs.googlecode.com/svn/trunk/ v-labs-read-only
download http://code.google.com/p/v-labs/downloads/list

本地下载：不保持更新

https://files.cnblogs.com/volnet/JsDragDrop0.1.zip

直接查看

https://files.cnblogs.com/volnet/drag.js
https://files.cnblogs.com/volnet/__firefox_extension.js

 

需要对本脚本进行更改，欢迎加入该项目：（进入项目）通过以下方式与我联系。