Recommend examples of how to use drag and drop elements

In the past few days, I have been working on an additional function for dragging elements, which is to align to the grid. In fact, it means determining the initial position of the element, and then moving the element a fixed distance each time when dragging it. Allows elements to be aligned within the grid. First, I will show the renderings, and then I will explain the details in detail and make a gif. You can see that each element moves according to the minimum unit distance. And each time the elements are aligned to the grid. First, I will explain the ideas and details based on the demo, and the demo code will be given later. 1. Determine the minimum unit of each movement of the element (10px and 10px in the demo), that is, each horizontal or vertical displacement is 10px. Laying a layer of grid background is to help us see the effect better (each grid in the demo is also 10px * 10px). 2. In order to see the effect more clearly, the width and height of the element (both are multiples of 10px) and the default position (also a multiple of 10px) are initialized. For example: the width and height of the element are 50px * 50px, and the initial position of the element is 0xp * 0px. The advantage of this is that when it is initially loaded, it can ensure that the element covers an integer number of small grids (that is,

1. JavaScript implements dragging elements to align to the grid (each move Fixed distance)

#Introduction: In the past few days, I have been working on an additional function for dragging elements, which is to align to the grid. In fact, it is to determine the initial position of the element, and then When dragging an element, it moves a fixed distance each time so that the elements can be aligned within the grid. First, I will show the effect diagram, and then I will explain the details in detail and make a gif. You can see that each time the element moves, It is moved according to the minimum unit distance, and each element is aligned to the grid

2. HTML5 actual combat and analysis of native drag (three dataTransfer objects)

##Introduction: Although native dragging is implemented through dragstart, drag and dragend events, this is just dragging. , there are still some drag and drop problems in IE6 and IE7, and data exchange is not implemented. In order to realize the exchange of data, IE5 introduces the dataTransfer object. The dataTransfer object is an attribute of the event object and is used to place the dragged element. The target transfers data in string format. Because it is a property of the event object, the dataTransfer object can only be accessed in the event handler of the drag and drop event. In the event handler, you can use the properties and methods of this object to complete the drag and drop. Function.

##3.

Mouse drag element copy and write effect based on jquery_jquery##Introduction : Implementation code for copying and writing effects of mouse dragging elements based on jquery. Friends who need it can refer to it

##4. JQuery dragging elements to change the size. Code_jquery

#Introduction: "Element dragging to change size" is actually the same principle as "element dragging". The source code prototype is attached below. Once you understand the principle, you can expand other With practical application, the idea becomes much simpler and clearer

5. jquery web element drag and drop plug-in effect and implementation_jquery

Introduction: Effect description: With the existing css style, after loading the plug-in, web page elements can be dragged and dropped in the window at will, and the original The effect options of positional translucency and dragging translucency can be selected as needed. In addition, when there are multiple draggable elements on the page, you can load another plug-in for setting z-index to simulate clicking on the top of the windows window. Effect.

##6. JS drag and drop plug-in implementation steps_javascript skills

#Introduction: The implementation of JS drag-and-drop plug-in is mainly introduced from six aspects: 1. The principle of js drag-and-drop plug-in, 2. The most basic effect achieved based on the principle, 3. Code abstraction and optimization, 4. , Extension: effective drag-and-drop elements, 5. Performance optimization and summary, 6. jquery plug-in , friends in need can refer to the following

[Related Q&A recommendations]:

javascript - Why does this method of dragging elements written in JS work when applied to multiple elements?

javascript - JS drag and drop element problem

What is the best drag sorting effect achieved by HTML5?

javascript - Can drag and drop in H5 modify the effect of following the mouse? How to modify?

The above is the detailed content of Recommend examples of how to use drag and drop elements. For more information, please follow other related articles on the PHP Chinese website!