js鼠標拖動拖拽效果代碼



108 430 144



特效描述:js 鼠標拖動 拖拽效果代碼,js鼠標拖動拖拽效果代碼

代碼結構

1. 引入JS

<script src="js/jquery-1.8.3.min.js"></script>

2. HTML代碼

<div class="container">
	<ul>
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>e</li>
		<li>f</li>
		<li>g</li>
	</ul>
	<ul></ul>
	<ul></ul>
</div>
<script type="text/javascript">
$(function(){
    //出入允許拖拽節點的父容器,一般是ul外層的容器
    drag.init('container');
});
/** 拖拽功能實現原理和說明:
1、說明:拖拽實現一般有兩種方式,一種是使用html的新特性dragable,但是由于在火狐瀏覽器上dragable每拖拽一次會打開一個新的標簽,
嘗試阻止默認行為和冒泡都無法解決,所以使用第二種方法來實現拖拽。第二種方法是使用js監聽鼠標三個事件,配合節點操作來實現。
2、實現原理:
    01-在允許拖拽的節點元素上,使用on來監聽mousedown(按下鼠標按鈕)事件,鼠標按下后,克隆當前節點
    02-監聽mousemove(鼠標移動)事件,修改克隆出來的節點的坐標,實現節點跟隨鼠標的效果
    03-監聽mouseup(放開鼠標按鈕)事件,將原節點克隆到鼠標放下位置的容器里,刪除原節點,拖拽完成。
3、優勢:
    01-可動態添加允許拖拽的節點(因為使用了on委托事件)
    02-可獲取到原節點,跟隨節點,目標節點的對象,可根據需要進行操作。
    03-使用js實現,兼容性好。
**/
//拖拽
var drag = {
    class_name : null,  //允許放置的容器
	permitDrag : false,	//是否允許移動標識
	_x : 0,             //節點x坐標
    _y : 0,			    //節點y坐標
    _left : 0,          //光標與節點坐標的距離
    _top : 0,           //光標與節點坐標的距離
    old_elm : null,     //拖拽原節點
    tmp_elm : null,     //跟隨光標移動的臨時節點
    new_elm : null,     //拖拽完成后添加的新節點
    //初始化
    init : function (className){
        //允許拖拽節點的父容器的classname(可按照需要,修改為id或其他)
        drag.class_name = className;
        //監聽鼠標按下事件,動態綁定要拖拽的節點(因為節點可能是動態添加的)
        $('.' + drag.class_name).on('mousedown', 'ul li', function(event){
            //當在允許拖拽的節點上監聽到點擊事件,將標識設置為可以拖拽
            drag.permitDrag = true;
            //獲取到拖拽的原節點對象
            drag.old_elm = $(this);
            //執行開始拖拽的操作
            drag.mousedown(event);
            return false;
        });
        //監聽鼠標移動
        $(document).mousemove(function(event){
            //判斷拖拽標識是否為允許,否則不進行操作
            if(!drag.permitDrag) return false;
            //執行移動的操作
            drag.mousemove(event);
            return false;
        });
        //監聽鼠標放開
        $(document).mouseup(function(event){
            //判斷拖拽標識是否為允許,否則不進行操作
            if(!drag.permitDrag) return false;
            //拖拽結束后恢復標識到初始狀態
            drag.permitDrag = false;
            //執行拖拽結束后的操作
            drag.mouseup(event);
            return false;
        });
    },
	//按下鼠標 執行的操作
	mousedown : function (event){
		console.log('我被mousedown了');
        //1.克隆臨時節點,跟隨鼠標進行移動
        drag.tmp_elm = $(drag.old_elm).clone();
        //2.計算 節點 和 光標 的坐標
        drag._x = $(drag.old_elm).offset().left;
        drag._y = $(drag.old_elm).offset().top;
        var e = event || window.event;
        drag._left = e.pageX - drag._x;
        drag._top = e.pageY - drag._y;
        //3.修改克隆節點的坐標,實現跟隨鼠標進行移動的效果
        $(drag.tmp_elm).css({
            'position' : 'absolute',
            'background-color' : '#FF8C69',
            'left' : drag._x,
            'top' : drag._y,
        });
        //4.添加臨時節點
        tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
        drag.tmp_elm = $(tmp).find(drag.tmp_elm);
        $(drag.tmp_elm).css('cursor', 'move');
	},
	//移動鼠標 執行的操作
	mousemove : function (event){
		console.log('我被mousemove了');
        //2.計算坐標
        var e = event || window.event;
        var x = e.pageX - drag._left;
        var y = e.pageY - drag._top;
        var maxL = $(document).width() - $(drag.old_elm).outerWidth();
        var maxT = $(document).height() - $(drag.old_elm).outerHeight();
        //不允許超出瀏覽器范圍
        x = x < 0 ? 0: x;
        x = x > maxL ? maxL: x;
        y = y < 0 ? 0: y;
        y = y > maxT ? maxT: y;
        //3.修改克隆節點的坐標
        $(drag.tmp_elm).css({
            'left' : x,
            'top' : y,
        });
        //判斷當前容器是否允許放置節點
        $.each($('.' + drag.class_name + ' ul'), function(index, value){
            //獲取容器的坐標范圍 (區域)
            var box_x = $(value).offset().left;     //容器左上角x坐標
            var box_y = $(value).offset().top;      //容器左上角y坐標
            var box_width = $(value).outerWidth();  //容器寬
            var box_height = $(value).outerHeight();//容器高
            //給可以放置的容器加背景色
            if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y && e.pageY < box_y-0+box_height){
                //判斷是否不在原來的容器下(使用坐標進行判斷:x、y任意一個坐標不等于原坐標,則表示不是原來的容器)
                if($(value).offset().left !== drag.old_elm.parent().offset().left 
                || $(value).offset().top !== drag.old_elm.parent().offset().top){
                    $(value).css('background-color', '#FFEFD5');
                }
            }else{
                //恢復容器原背景色
                $(value).css('background-color', '#FFFFF0');
            }
        });
	},
    //放開鼠標 執行的操作
    mouseup : function (event){
        console.log('我被mouseup了');
        //移除臨時節點
        $(drag.tmp_elm).remove();
        //判斷所在區域是否允許放置節點
        var e = event || window.event;
        $.each($('.' + drag.class_name + ' ul'), function(index, value){
            //獲取容器的坐標范圍 (區域)
            var box_x = $(value).offset().left;     //容器左上角x坐標
            var box_y = $(value).offset().top;      //容器左上角y坐標
            var box_width = $(value).outerWidth();  //容器寬
            var box_height = $(value).outerHeight();//容器高
            //判斷放開鼠標位置是否想允許放置的容器范圍內
            if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y && e.pageY < box_y-0+box_height){
                //判斷是否不在原來的容器下(使用坐標進行判斷:x、y任意一個坐標不等于原坐標,則表示不是原來的容器)
                if($(value).offset().left !== drag.old_elm.parent().offset().left 
                || $(value).offset().top !== drag.old_elm.parent().offset().top){
                    //向目標容器添加節點并刪除原節點
                    tmp = $(drag.old_elm).clone();
                    var newObj = $(value).append(tmp);
                    $(drag.old_elm).remove();
                    //獲取新添加節點的對象
                    drag.new_elm = $(newObj).find(tmp);
                }
            }
            //恢復容器原背景色
            $(value).css('background-color', '#FFFFF0');
        });
    },
};
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 圖片拖動 圖片拖拽
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子