jquery implements drag and drop-Front-end Q&A-php.cn

jquery implements drag and drop

PHPz

Release： 2023-05-25 10:07:07

Original

1325 people have browsed it

With the popularity of modern web pages, draggable elements that interact with users have become an indispensable part of the design. JQuery is a very popular JavaScript library that simplifies many common operations in development. One of the features is the implementation of draggable elements. In this article, we will learn how to implement draggable elements using JQuery.

1. Create HTML and CSS

Before we start writing JQuery code, we need an HTML page to implement draggable elements. We will create a simple HTML layout with draggable elements and some basic CSS styles. Here is our HTML and CSS code:

<!DOCTYPE html>
<html>
   <head>
      <title>可拖拽实例</title>
      <style type="text/css">
         .draggable {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: #fff;
            text-align: center;
            line-height: 100px;
            position: absolute;
            cursor: move;
         }
      </style>
   </head>
   <body>
      <div class="draggable">可拖拽元素</div>
   </body>
</html>

Copy after login

In our code, we create a simple HTML page that contains a draggable element. Our CSS style defines the style of our draggable elements, including width, height, color, position, etc.

2.Introduce the JQuery library

Next, we need to introduce the JQuery library. You can download the latest library files from the JQuery official website and put them in your own project. Alternatively, you can use JQuery's CDN link. Add the following code to our code:

<!DOCTYPE html>
<html>
   <head>
      <title>可拖拽实例</title>
      <style type="text/css">
         .draggable {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: #fff;
            text-align: center;
            line-height: 100px;
            position: absolute;
            cursor: move;
         }
      </style>
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
   </head>
   <body>
      <div class="draggable">可拖拽元素</div>
   </body>
</html>

Copy after login

In our code, we have added a CDN link for JQuery that we can use for our example.

3. Write JQuery code

Now, we will start writing JQuery code to implement the function of draggable elements. The core of JQuery is selectors and events. In our example, we will use the .mousemove() event and the .css() method.

<!DOCTYPE html>
<html>
   <head>
      <title>可拖拽实例</title>
      <style type="text/css">
         .draggable {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: #fff;
            text-align: center;
            line-height: 100px;
            position: absolute;
            cursor: move;
         }
      </style>
      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script>
         $(document).ready(function() {
            var x = 0;
            var y = 0;
            var dragging = false;
            var element;
            $(".draggable").mousedown(function(e) {
               element = $(this);
               x = e.pageX - element.offset().left;
               y = e.pageY - element.offset().top;
               dragging = true;
            });
            $(document).mouseup(function() {
               dragging = false;
            });
            $(document).mousemove(function(e) {
               if (dragging) {
                  element.css({
                     top: e.pageY - y,
                     left: e.pageX - x
                  });
               }
            });
         });
      </script>
   </head>
   <body>
      <div class="draggable">可拖拽元素</div>
   </body>
</html>

Copy after login

In our code, we use $(document).ready() to indicate that the page is loaded and the JQuery code can be executed.

We first define four variables: x and y store the distance between the mouse pointer and the upper left corner of the element, dragging is used to detect whether the element is being dragged, and element is used to store the dragged element.

We use $(".draggable").mousedown() to bind the mousedown event to our element. When the user clicks on an element and presses the mouse, the distance between the mouse pointer and the element is recorded and the dragging variable is set to true.

We use $(document).mouseup() to bind the mouseup event to detect when the user releases the mouse button. In this case, the dragging variable is set to false.

Finally, we use $(document).mousemove() to bind the mousemove event to detect mouse movement. If the element is being dragged (dragging = true), the .css() method will be used to set the element's top and left values to move the element under the mouse pointer.

4. Test the effect

Now, we can run our code in the browser. If everything works correctly, we should be able to click and drag our draggable element.

During testing, you may need to adjust certain values in your code to make your draggable elements work better. You may also be able to add additional styles and attributes to customize your element to suit your project needs.

Summary:

In this article, we learned how to use JQuery to implement draggable elements. We wrote some simple HTML and CSS code and added the JQuery library. We use the .mousedown(), .mouseup() and .mousemove() events and the .css() method to implement the drag-and-drop function.

When you use JQuery to implement draggable elements in your own project, you can use the sample code provided in this article as a starting point and customize it to suit your needs. Always keep readability, maintainability, and ease of use in mind.

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