正文

基于html5拖拽api实现列表的拖拽排序

fly叶落丶知秋  2022-02-14  335

关键词：

html代码：

<ul ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
    <li draggable="true" ondragstart="dragstart_handler(event);">1</li>
    <li draggable="true" ondragstart="dragstart_handler(event);">2</li>
    <li draggable="true" ondragstart="dragstart_handler(event);">3</li>
    <li draggable="true" ondragstart="dragstart_handler(event);">4</li>
    <li draggable="true" ondragstart="dragstart_handler(event);">5</li>
</ul>

js代码：

var uls = document.querySelector('ul');
var offsetTop = uls.offsetTop;
var clientX = '';
var clientY = '';
var n = 0;
function dragstart_handler(ev) {
      console.log("dragStart");
      ev.target.setAttribute('id', 'test1')
      ev.dataTransfer.setData("text/plain", ev.target.id);
}

function dragover_handler(ev) {
      ev.preventDefault();
      clientX = ev.clientX;
      clientY = ev.clientY;
      n = Math.round((clientY - offsetTop)/52)        //52代指拖拽元素的高度    
}

function drop_handler(ev) {
      console.log("Drop");
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      console.log(n)
      var nodes = document.getElementById(data);
      uls.insertBefore(nodes, children(uls)[n]);
      nodes.removeAttribute('id');
      ev.dataTransfer.clearData();
}
function children(node){
      var tmp = node.childNodes;
      var arr = [];
      tmp.forEach(function(item){
           if(item.nodeType == 1){
               arr.push(item);
           }
      });
      return arr;
}

效果展示：

原生api实现拖拽上传文件实践

功能：拖拽上传文件、图片，上传的进度条，能够同时上传多个文件。完整的demo地址：https://github.com/qcer/FE-Components/tree/master/QDrag涉及到的API：1、HTML5的拖拽事件：dragenter，dragover，drop等2、XMLHttpRequest Level23、FormData4、（扩展... 查看详情

vue集成dhtmlx。实现列表到树形的拖拽(代码片段)

效果查看：将右侧菜单拖拽入左侧树中：1，public引入dhtmlx,并在index.html中引用：2，封装vue组件：<template><divid="dhtmlTree"style="width:95%;height:100%;overflow:au 查看详情

html5的拖拽dragapi（如果看了api不懂，看看那三个案例就会恍然大悟）(代码片段)

1.拖拽和释放定义：　　拖拽：Drag;　　释放：Drop;2.源对象和目标对象：　　3.相关API:　　ondragstart:源对象开始被拖动　　ondrag:源对象被拖动的过程中　　ondragend:源对象被拖动结束　　ondragenter:目标对象被源对象拖动进入　　on... 查看详情

ztree的拖拽排序

ztree本身是可以支持拖拽的，但是却没有找到明确的支持拖拽的排序，也就是说，在拖拽过程中，需要自定义维护拖拽后的顺序并保存至后台。在这样一个比较常规的需求情况下，网上也有朋友给出了一些解决方案，比如自定义... 查看详情

通过js实现简单的拖拽功能并且可以在特定元素上禁止拖拽

前言关于讲解JS的拖拽功能的文章数不胜数，我确实没有必要大费周章再写一篇重复的文章来吸引眼球。本文的重点是讲解如何在某些特定的元素上禁止拖拽。这是我在编写插件时遇到的问题，其实很多插件的拖拽功能并没有处... 查看详情

为啥使用html5的拖拽功能，在火狐中总会弹出一个新面页？

我在研究html5的拖拽功能时，将一个元素设置成可拖拽元素（设置其属性draggable="true"）。这时拖拽功能就可以使用了，在多个浏览器上都很正常，但是在火狐浏览器下，虽然拖拽功能也已经实现，但是每次拖拽操作后，... 查看详情

reactdnd实现横向和纵向拖拽排序

...序，其实就是操作数组的排序。所以定一个数组，并且在拖拽的时候修改数组内容的位置，再由React渲染出来就可以了。所以重点就在如何监听拖拽元素拖拽的位置和放置的位置。这个就要提到上一篇将API时提到的useDrag的end(item,... 查看详情

实现元素简单的拖拽

1.通过元素的offsetLeft，offsettop实现元素的拖拽1<!DOCTYPEhtml>2<html>34<head>5<metacharset="UTF-8">6<title></title>7<styletype="text/css">8.box{9width:100px;10height:100px 查看详情

js实现登陆页面的拖拽功能

<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>登陆页面的拖拽功能实现</title> </head> <styletype="text/css"> *{ margin:0; padding:0; } a{ text-d 查看详情

vue集成dhtmlx。实现列表到树形的拖拽(代码片段)

效果查看：将右侧菜单拖拽入左侧树中：1，public引入dhtmlx,并在index.html中引用：2，封装vue组件：<template><divid="dhtmlTree"style="width:95%;height:100%;overflow:auto;"></div></template><s... 查看详情

vue集成dhtmlx。实现列表到树形的拖拽(代码片段)

js实现鼠标的拖拽效果

拖拽效果在我们上网的过程中是很常见的，大家都应该在电脑上面登陆过qq吧，当这个qq的登陆框弹出来的时候，我们是可以进行拖动的。这就是一个拖拽效果这是我在慕课网上面看到的，我直接拿过来了，地址http://www.imooc.com/le... 查看详情

qt中如何实现一个treewidget的拖拽功能

QTreeWidget中有一个分级别的树，只允许同级别之间的拖拽功能，那位会做帮帮小弟吧参考技术AsetDragDropMode(QAbstractItemView::InternalMove) 查看详情

jqgrid最近在用jqgrid,我想要实现列的拖拽功能，请问有人实现过吗

我没说清楚，我要实现jqgrid列的拖拽，不是列宽，是列的顺序拖拽。谢谢参考技术A上一章提到在Jqgrid中如何设置二级表头,这一章节主要探讨Jqgrid表格里面的数据如果实现拖动功能,比如你想把第一行的数据拖到当前页的最后一行... 查看详情

javascript实现最简单的拖拽效果

一、一些无关痛痒的唠叨拖拽还是挺不错的一个页面效果，我个人认为，其生命力在于可以让用户自己做一些操作，所谓自定义。例如：①浏览器标签顺序的拖拽切换现在基本上所有的选项卡式的浏览器都有顺序拖拽切换的功能... 查看详情

javascript实现网页元素的拖拽效果

以下的页面中放了两个div，能够通过鼠标拖拽这两个元素到任何位置。实现该效果的HTML页面代码例如以下所看到的：<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><styletype="text/css">#xixi{wid 查看详情

列表排序交互方式小结

...比较多，因此总结了一下几种列表排序的方式，包括：1.拖拽；2.置顶；3.上/下移动；4.编辑序号。使用方式：对列表中某项或某几项进行置顶操作方便性：局限：使用场景：用于突出众多列表项中的少数几项，从而首先展示重要... 查看详情

vue2实现图片的拖拽缩放旋转(代码片段)

本文是基于vue2实现图片的拖拽、旋转、鼠标滚动放大缩小等功能。效果图分步骤实现在这里看下拖拽、旋转、缩放的几个方法1.获取图片的实际宽高getImgSize(url)returnnewPromise((resolve,reject)=>letimgObj=newImage();imgObj.src=url;imgO... 查看详情