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

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

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

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;
}

效果展示:


相关文章
|
19天前
|
监控 算法 API
1688商品列表API数据解析
1688商品列表API支持通过关键词、价格、类目筛选商品,适用于电商分析与竞品监控,提供分钟级更新与高并发能力。支持批量获取商品信息、分页查询,附Python调用示例及完整错误处理逻辑。
|
1月前
|
JSON API 数据格式
小红书商品列表API数据解析(附代码)
本内容介绍了小红书商品列表API的用途及调用方式,适用于电商分析与市场研究。接口支持HTTP GET请求,返回JSON格式商品信息,包含标题、价格、销量、商家名称等字段。文中提供了基于Python的完整请求示例,使用requests库实现,并包含请求头设置和参数传递方式,便于开发者快速集成与测试。
|
20天前
|
JSON 监控 API
京东商品数据获取新姿势:商品列表API参数全解析
京东商品列表API是京东开放平台的核心接口,支持开发者高效获取商品名称、价格、销量等信息,适用于电商分析、价格监控等场景。提供关键词搜索、分类筛选、价格区间、排序及分页功能,支持HTTPS请求,数据实时更新,单次可查询最多200个SKU,助力电商应用开发。
|
1月前
|
JSON 监控 API
抖音视频列表API秘籍!轻松获取视频列表数据
抖音视频列表API是抖音开放平台提供的核心接口,支持按关键词、分类、排序方式筛选视频,适用于内容推荐、趋势分析等场景。接口返回含视频ID、标题、播放量等50+字段,支持分页获取,通过HTTP GET请求调用,返回JSON格式数据,便于开发者快速集成与处理。需注册平台账号获取访问权限。
439 56
|
12天前
|
JSON 监控 API
速卖通商品列表API秘籍!轻松获取商品列表数据
速卖通商品列表API支持关键词搜索、分类筛选、多语言返回及分页排序功能,适用于比价系统、库存监控、市场研究等场景。开发者可快速获取商品数据,构建自动化应用。
|
11天前
|
监控 算法 API
亚马逊商品列表API开发指南
亚马逊商品列表API助力开发者批量获取商品数据,支持市场分析、竞品监控与推荐系统。涵盖商品信息、价格、库存等,提供Python调用示例,快速接入。
|
1月前
|
JSON 搜索推荐 API
小红书笔记列表API数据解析(附代码)
本内容介绍如何利用小红书开放平台的笔记列表API,批量获取与关键词或用户相关的笔记数据,包括标题、封面图、互动数据等。接口支持按关键词分页查询及排序筛选,适用于内容聚合与用户分析。附Python示例代码,演示通过GET请求调用API的方法,并处理返回的JSON数据。
|
12天前
|
数据采集 JSON API
微店商品列表API接口开发指南:从零到实战
微店商品列表API(vdian.shop.item.list.get)用于获取店铺商品数据,支持分页、签名认证,返回JSON格式。适用于商品同步、竞品分析、多平台展示及数据清洗。提供Python请求示例,便于快速接入。
|
1月前
|
缓存 前端开发 API
阿里巴巴国际站关键字搜索 API 实战:从多条件筛选到商品列表高效获客
本文详解了如何通过阿里巴巴国际站的关键字搜索接口实现多条件商品搜索功能,涵盖接口调用、参数设置、分页处理及数据解析,并提供可复用的 Python 实现代码,助力开发者高效构建跨境电商商品搜索系统。
|
1月前
|
JSON API 数据格式
抖音商品列表API秘籍!轻松获取商品列表页面数据
抖音商品列表API是抖音开放平台的核心电商接口,支持按分类、关键词、销量等条件筛选商品,具备分页、排序、数据过滤等功能,适用于电商整合、竞品分析等场景。接口返回JSON格式数据,包含商品列表、总数及分页信息,提供Python请求示例,便于开发者快速接入。