另一个行拖动效果

<!doctype html>
<html>
    <head>
        <title>行拖动 by 司徒正美</title>
        <script>
            //防止拖动时内容被选中
            var getStyleName= (function(){
                var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'];
                var reg_cap = /-([a-z])/g;
                function getStyleName(css, el) {
                    el = el || document.documentElement;
                    var style = el.style,test;
                    for (var i=0, l=prefixes.length; i < l; i++) {
                        test = (prefixes[i] + css).replace(reg_cap,function($0,$1){
                            return $1.toUpperCase();
                        });
                        if(test in style){
                            return test;
                        }
                    }
                    return null;
                }
                return getStyleName;
            })();
            function log(s){
              window.console && window.console.log(s);
            }
            var userSelect = getStyleName("user-select");
            function onUnselect(){
                if(typeof userSelect === "string"){
                    return document.documentElement.style[userSelect] = "none";
                }
                document.unselectable  = "on";
                document.selectstart  = function(){
                    return false;
                }
            };
            function offUnselect(){
                if(typeof userSelect === "string"){
                    return document.documentElement.style[userSelect] = "text";
                }
                document.unselectable  = "off";
                document.selectstart  = null;
            };
            //事件绑定
            var addEvent = document.addEventListener ? function(el,type,callback){
                el.addEventListener( type, callback, false );
            } : function(el,type,callback){
                el.attachEvent( "on" + type, callback );
            }
            window.onload = function(){
                var dataTransfer =document.createElement("table"), draging = false, tr1;
                dataTransfer.id = "dataTransfer";
                var style = dataTransfer.style
                document.body.appendChild(dataTransfer);
                var table = document.getElementById("target");
                addEvent(table,"mousedown",function(e){
                    e = e || event;
                    var target = e.target || e.srcElement;
                    if(target.tagName === "TD"){
                        tr1 = target.parentNode;
                        dataTransfer.rowIndex = tr1.rowIndex;
                        dataTransfer.appendChild(tr1);
                        style.display = "";
                        style.position = "absolute";
                        style.left = (e.clientX+20)+"px";
                        style.top = (e.clientY+10)+"px";
                        draging = true;
                        onUnselect();
                    }
                });
                addEvent(table,"mousemove",function(e){
                    if(draging){
                        style.left = (e.clientX+20)+"px";
                        style.top = (e.clientY+10)+"px";
                    }
                });

addEvent(document,"mouseup",function(e){
                    if(draging){
                        var td = document.elementFromPoint(e.pageX, e.pageY);
                        if(td.tagName == "TD"){
                            var tr2 = td.parentNode;
                            tr2.parentNode.insertBefore(tr1,tr2.nextSibling);
                             log("移动位置")
                        }else{
                             log("还原位置");
                             log( dataTransfer.rowIndex)
                            var tr2 = table.rows[ dataTransfer.rowIndex ];
                            tr2.parentNode.insertBefore(tr1,tr2);

}
                        style.display = "none";
                        style.position = "";
                        draging = false;
                        offUnselect();
                    }
                });

}

</script>
        <style>
            .blue_table {
                border: 1px solid #4d6366;
                border-collapse: collapse;
                width: 90%;
                background:#B0E0E6;
            }
            .blue_table td ,.blue_table thead th{
                border: 1px solid #4d6366;
            }

.blue_table thead th{
                background: #8080c0;
                color:#fff;
                font-weight: normal;
            }

#dataTransfer {
                background: #36daff;
                opacity:0.85;
                background: -webkit-gradient(linear, left top, right top, from(#36daff), to(#fff));
                background: -moz-linear-gradient(left, #36daff, #fff);
                background:-o-linear-gradient(left, #36daff, #fff);
                box-shadow:10px 10px 5px #444;
                -moz-box-shadow:10px 10px 5px #444;
                -webkit-box-shadow:10px 10px 5px #444;
            }

</style>
    </head>
    <body>

<table class="blue_table" id="target">
            <thead>
                <tr>
                    <th>事件名称 </th><th>触发机制</th><th>绑定节点</th><th>相应兼容事件</th><th>常见操作 </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        ondragstart
                    </td>
                    <td>
                        当鼠标左键点击某个可拖动节点开始拖拽时。
                    </td>
                    <td>
                        拖动节点
                    </td>
                    <td>
                        onmousedown, ondraggesture
                    </td>
                    <td>
                        对 DataTransfer 的数据进行初始化。初始化一些资源。
                    </td>
                </tr>
                <tr>
                    <td>
                        ondrag
                    </td>
                    <td>
                        当拖拽进行时，在拖拽结束之前，在 dragstart 之后。
                    </td>
                    <td>
                        拖动节点
                    </td>
                    <td>
                        onmousemove
                    </td>
                    <td>
                        对拖动节点的位置信息进行处理。
                    </td>
                </tr>
                <tr>
                    <td>
                        ondragenter
                    </td>
                    <td>
                        拖动节点进入放置容器时。
                    </td>
                    <td>
                        放置容器
                    </td>
                    <td>
                        onmouseenter
                    </td>
                    <td>
                        对放置容器的样式进行修改。
                    </td>
                </tr>
                <tr>
                    <td>
                        ondragover
                    </td>
                    <td>
                        拖动节点在放置容器上方时。
                    </td>
                    <td>
                        放置容器
                    </td>
                    <td>
                        onmouseover
                    </td>
                    <td>
                        判断拖动的节点是否被放置容器接受。
                    </td>
                </tr>
                <tr>
                    <td>
                        ondragleave
                    </td>
                    <td>
                        拖动节点离开放置容器上方时。
                    </td>
                    <td>
                        放置容器
                    </td>
                    <td>
                        ondragexit
                    </td>
                    <td>
                        对放置容器的样式进行修改。
                    </td>
                </tr>
                <tr>
                    <td>
                        ondrop
                    </td>
                    <td>
                        拖动节点在放置容器上方松开鼠标左键时。
                    </td>
                    <td>
                        放置容器
                    </td>
                    <td>
                        ondragdrop
                    </td>
                    <td>
                        对 DataTransfer 的数据进行处理。对 DOM 节点进行操作。
                    </td>
                </tr>
                <tr>
                    <td>
                        ondragend
                    </td>
                    <td>
                        松开鼠标左键时，如 drop 事件触发，则在 drop 事件之后。
                    </td>
                    <td>
                        拖动节点
                    </td>
                    <td>
                        onmouseup
                    </td>
                    <td>
                        释放在 dragstart 中创建的资源。
                    </td>
                </tr>
            </tbody>
        </table>

</body>
</html>

posted on 2011-05-30 15:09 司徒正美阅读(1676) 评论(2) 收藏举报

刷新页面返回顶部

Ruby's Louvre

导航

公告

另一个行拖动效果