jQuery는 간단한 드래그 효과를 구현합니다.
- 小云云원래의
- 2018-01-04 14:18:361699검색
이 글에서는 jQuery를 사용하여 간단한 드래그 효과를 얻는 방법에 대한 정보를 주로 소개합니다. 최근에는 웹사이트의 드래그 효과가 매우 좋다고 생각합니다. 참고로 편집자를 따라가서 자세한 소개를 살펴보도록 하겠습니다.
머리말
이 글은 주로 jQuery를 이용한 간단한 드래그 효과를 소개하고 참고 및 학습을 위해 공유합니다. 아래에서는 많은 말을 하지 않겠습니다. 자세한 소개를 살펴보겠습니다.
질문하기
한 상자에서 다른 상자로 요소를 가져오는 방법은 무엇인가요?
구현 아이디어
이 작업에 포함된 이벤트는 mousedown mousemove mouseup입니다. 이 세 가지 이벤트를 모니터링하고 해당 작업을 수행합니다.
작업 설계의 노드는 원래 노드, 임시 노드, 새 노드입니다.
노드의 이동은 이벤트 e의 좌표와 관련됩니다. e
작업 요소는 JQUERY
해당 댓글은 기사에 반영되어 있으니 꼭 읽어보시고 이해하시면 됩니다.
- 먼저 드래그에 필요한 매개변수를 포함하여 객체 드래그를 정의합니다.
- 다양한 마우스 이벤트를 수신하는 초기화 init 함수를 정의합니다.
- mousedown 이벤트: 임시 노드를 복제합니다. 마우스 클릭 위치와 노드 위치 사이의 X, Y 차이를 기록하고 복제 사본의 스타일을 설정하고 이 사본을 원본 컨테이너에 추가합니다.
- mousemove 이벤트: 마우스의 상대적 변위를 결정하고 XY를 설정합니다. 복사본의 절대 위치를 확인하고 마우스를 조정합니다. 브라우저 밖으로 이동하는 상황을 3개의 UL을 통과하여 원래 컨테이너가 아닌 경우 마우스 위치가 다른 컨테이너의 범위 내에 있는지 판단합니다. 그렇다면 마우스의 현재 컨테이너 스타일이 수정됩니다.
- mouseup 시간: 임시 노드를 제거합니다. 3개의 UL을 탐색하여 원본 컨테이너가 아닌 경우 마우스 위치가 다른 컨테이너 범위 내에 있는지 확인합니다. 그렇다면 컨테이너 아래에 새 노드를 추가하고 원본 컨테이너에서 원본 노드를 삭제합니다.
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖拽</title> <style> .container ul{ width: 350px; padding: 15px; min-height:300px; background-color:#FFFFF0; margin:20px; display: inline-block; border-radius: 5px; border: 1px solid #bbb; } .container ul li{ display: block; float: left; width: 350px; height: 35px; line-height: 35px; border-radius: 4px; margin: 0; padding: 0; list-style: none; background-color:#EED2EE; margin-bottom:10px; -moz-user-select: none; user-select: none; text-indent: 10px; color: #555; } </style> </head> <body> <p 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> </p> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <!-- <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> --> <script type="text/javascript"> $(function(){ //出入允许拖拽节点的父容器，一般是ul外层的容器 drag.init('container'); }); //拖拽 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){ //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){ //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+box_width && e.pageY > box_y && e.pageY < box_y+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){ //移除临时节点 $(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> </body> </html>프로젝트 데모는 여기를 클릭하세요.
관련 권장사항:
위 내용은 jQuery는 간단한 드래그 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.