search
HomeWeb Front-endJS TutorialjQuery implements simple drag effect

jQuery implements simple drag effect

Jan 04, 2018 pm 02:18 PM
jqueryEffect

This article mainly introduces you to the relevant information about using jQuery to achieve a simple drag effect. Recently, I found that the drag effect of a website is very good. I personally think it is a good user experience. I took the time to study it and it is necessary. Friends can refer to it. Let’s take a look at the detailed introduction with the editor.

Preface

This article mainly introduces you to a simple drag effect achieved by using jQuery, and shares it for your reference and study. I won’t say much below, let’s take a look at the detailed introduction. Bar.

Ask a question

How to pull elements from one box to another box?

Implementation ideas

  • The events included in this operation are mousedown mousemove mouseup. Monitor these three events and perform corresponding operations.

  • The nodes of the operation design are: original node, temporary node, new node

  • The movement of the node involves the coordinates of event e

  • The operation elements are implemented using JQUERY

The corresponding comments have been reflected in the article, please read it carefully, you can understand it.

    First define an object drag, including the parameters needed for dragging
  • Define the initialization init function to monitor various mouse events
  • mousedown event: Clone a temporary node. Record the X, Y difference between the mouse click position and the node position, set the style of the clone copy and add this copy to the original container
  • mousemove event: determine the relative displacement of the mouse and set the copy Absolute position style.
  • mouseup Time: Remove temporary node. Traverse the three ULs. If it is not the original container, determine whether the mouse position is within the range of other containers. If so, add a new node under the container and delete the original node from the original container.
  • nbsp;html>
    
    
     <meta>
     <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>
    
    
    
    
     <p>
    
     </p>
       
    • A
    •  
    • B
    •  
    • C
    •  
    • e
    •  
    • f
    •  
    • g
    •  
     
       
        <script></script> <script> $(function(){ //出入允许拖拽节点的父容器,一般是ul外层的容器 drag.init(&#39;container&#39;); }); //拖拽 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; //监听鼠标按下事件,动态绑定要拖拽的节点(因为节点可能是动态添加的) $(&#39;.&#39; + drag.class_name).on(&#39;mousedown&#39;, &#39;ul li&#39;, 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({ &#39;position&#39; : &#39;absolute&#39;, &#39;background-color&#39; : &#39;#FF8C69&#39;, &#39;left&#39; : drag._x, &#39;top&#39; : drag._y, }); //4.添加临时节点 tmp = $(drag.old_elm).parent().append(drag.tmp_elm); drag.tmp_elm = $(tmp).find(drag.tmp_elm); $(drag.tmp_elm).css(&#39;cursor&#39;, &#39;move&#39;); }, //移动鼠标 执行的操作 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({ &#39;left&#39; : x, &#39;top&#39; : y, }); //判断当前容器是否允许放置节点 $.each($(&#39;.&#39; + drag.class_name + &#39; ul&#39;), 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(&#39;background-color&#39;, &#39;#FFEFD5&#39;); } }else{ //恢复容器原背景色 $(value).css(&#39;background-color&#39;, &#39;#FFFFF0&#39;); } }); }, //放开鼠标 执行的操作 mouseup : function (event){ //移除临时节点 $(drag.tmp_elm).remove(); //判断所在区域是否允许放置节点 var e = event || window.event; $.each($(&#39;.&#39; + drag.class_name + &#39; ul&#39;), 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(&#39;background-color&#39;, &#39;#FFFFF0&#39;); }); }, }; </script>
      • Please click here for project demo.

      Related recommendations:


      TP5 integrates webuploader to realize preview drag-and-drop search and delete

      Example to explain jQuery using zTree plug-in to achieve Drag function

      Implementation of table mouse drag sorting function in HTML

      The above is the detailed content of jQuery implements simple drag effect. For more information, please follow other related articles on the PHP Chinese website!

      Statement
      The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
      Python vs. JavaScript: Development Environments and ToolsPython vs. JavaScript: Development Environments and ToolsApr 26, 2025 am 12:09 AM

      Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

      Is JavaScript Written in C? Examining the EvidenceIs JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

      Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

      JavaScript's Role: Making the Web Interactive and DynamicJavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

      JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

      C   and JavaScript: The Connection ExplainedC and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

      C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

      From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

      JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

      Python vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

      Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

      The Role of C/C   in JavaScript Interpreters and CompilersThe Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AM

      C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

      JavaScript in Action: Real-World Examples and ProjectsJavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

      JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

      See all articles

      Hot AI Tools

      Undresser.AI Undress

      Undresser.AI Undress

      AI-powered app for creating realistic nude photos

      AI Clothes Remover

      AI Clothes Remover

      Online AI tool for removing clothes from photos.

      Undress AI Tool

      Undress AI Tool

      Undress images for free

      Clothoff.io

      Clothoff.io

      AI clothes remover

      Video Face Swap

      Video Face Swap

      Swap faces in any video effortlessly with our completely free AI face swap tool!

      Hot Tools

      MinGW - Minimalist GNU for Windows

      MinGW - Minimalist GNU for Windows

      This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

      Zend Studio 13.0.1

      Zend Studio 13.0.1

      Powerful PHP integrated development environment

      EditPlus Chinese cracked version

      EditPlus Chinese cracked version

      Small size, syntax highlighting, does not support code prompt function

      mPDF

      mPDF

      mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

      WebStorm Mac version

      WebStorm Mac version

      Useful JavaScript development tools