Shulou(Shulou.com)06/02 Report--

This article mainly shows you "JS how to realize the drag and placeholder function of elements". The content is simple and easy to understand and organized clearly. I hope it can help you solve your doubts. Let Xiaobian lead you to study and learn "JS how to realize the drag and placeholder function of elements".

Let's see the effect first:

Function:

Drag an element from one block to another block to move to a certain position. The blogger does this according to his own needs. The clicked element can only move to the next module in which it is located. If you move to another module, it will return to its original position. When the position of the element you drag does not exceed a certain distance, it will automatically spring back to its original position.

Case Study:

The key step is to! When you press the mouse button, you get not only the current element but also the current module.(So at the beginning, we must first set an index attribute for each module. The attribute value is the index number of each module itself.) This step is to determine whether the module to be moved to is the next module of the current module when the mouse is released.(May be a bit around, read carefully), if the condition is true, then we have to start and move to the module of the element one by one to compare the position (here is to determine the element to move to the specific position), to determine the good in the specific position to create a new empty element, the content of the mobile element added to this empty element, the last step! Don't forget to remove the original element.

Code presentation:

Document * { margin: 0; left: 0; list-style: none; box-sizing: border-box; } .container { display: flex; justify-content: space-around; width: 1000px; height: 600px; margin: 100px auto; padding: 0; } .container li { width: 180px; height: 100%; background-color: plum; border-radius: 10px; padding: 5px; } .item { width: 170px; height: 100px; background-color: salmon; margin: 5px 0; border-radius: 10px; cursor: pointer; } 1 2 3 4 5 6 7 8 9 $(function(){ for (var i = 0; i

< 5; i++) { $(".container li")[i].setAttribute('index', i); } $('.item').on('mousedown',function(e){ var index = Number($(this).parent()[0].getAttribute('index')); //获取当前所选任务的左边距和上边距 startLeft = $(this).offset().left; startTop = $(this).offset().top; //求鼠标在所选任务里的位置 mouseX = e.pageX - startLeft; mouseY = e.pageY - startTop; $(this).on('mousemove',function(e){ $(this).offset({ left: e.pageX - mouseX, top: e.pageY - mouseY }) }) $(this).on('mouseup',function(){ //用来记录item移动到那个位置 k = -1; $(this).off('mousemove'); //获取所选 模块 的下一个 模块索引 if (index >

= 4) { index = 3; } var next = $('.container li').eq(index + 1); //If the mouse is released, the distance moved is exactly within the interval of the next module selected, execute if ($(this).offset().left >= next.offset().left&&$(this).offset().left $(item).offset().top) { k = i; } }) //If k == -1, it means to put the task in the first position of the module if (k == -1) { next.children().eq(0).before(father); } else { next.children().eq(k).after(father); } } //Unbind move event, clear item in original position $(this).off("mousemove"); $(this).remove(); $(this).empty(); } else { //here is the move failed, return to the original position $(this).offset({ left: startLeft, top: startTop }) $(this).off("mousemove"); } }) }) }) Extension:

In this case, combined with background data, you can achieve the display and drag effect of different progress of multiple tasks, as shown in the following figure:

The above is "JS how to achieve the element of drag and placeholder function" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.