JQuery 拖拽元素,并移动其他元素位置

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>拖动元素,并移动其他元素</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><style>span{border: 1px solid;margin-left: 10px;}</style>
</head>
<body class="layui-anim layui-anim-up" style="overflow-x: auto;">
<div id="app"><span index="1" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"">元素1</span><span index="2" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">元素2</span><span index="3" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">元素3</span><span index="4" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"">元素4</span><span index="5" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">元素5</span>
</div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script>function allowDrop(ev) {ev.preventDefault();}var source = null;var index, text;function drag(ev, current) {source = current;index = $(current).attr('index');text = $(current).text();}function drop(ev, current) {ev.preventDefault();if(index < $(current).attr('index')){moveDown(source, current);}else{moveTop(source, current);}$(current).text(text);}//向后拖动元素,递归向前移动其他元素function moveDown(se, ce){var t = $(se).next().text();$(se).text(t);se = $(se).next();if($(se).attr('index') === $(ce).attr('index')){return false;}else if(se.length === 0){return false;}else{moveDown(se, ce);}}//向前拖动元素,递归向后移动其他元素function moveTop(se, ce){var t = $(se).prev().text();$(se).text(t);se = $(se).prev();if($(se).attr('index') === $(ce).attr('index')){return false;}else if(se.length === 0){return false;}else{moveTop(se, ce);}}
</script>
</body>
</html>

JQuery 拖拽元素,并移动其他元素位置相关推荐

利用HTML5新特性实现拖拽交换表格单元格元素
利用HTML5新特性实现拖拽交换表格单元格元素 HTML5新特性:拖放拖放拖放(Drag 和 Drop)是很常见的特性.它指的是您抓取某物并拖入不同的位置. 拖放是 HTML5 标准的组成部分:任 ...
jQuery 拖拽窗体
jQuery 拖拽窗体事件今天给大家分享一个简单拖拽事件,可以通过拖拽事件实现数据的传递,已达到良好的交互,可以实现更为可观的效果. 具体来说,只有三部基本的操作: 第一:当鼠标按下时触发的事件(o ...
JQuery拖拽通过八个点改变div大小
(function($) {/*** 默认参数*/var defaultOpts = {stage: document, //舞台item: 'resize-item', //可缩放的类名};/*** ...
html实现拖拽排序,简单的jquery拖拽排序效果实现代码
步骤: 1.实现随鼠标移动的效果: 2.初始化一个元素及其坐标: 3.拖拽对象的最后坐标,与元素的坐标进行计算和判断来确定要插入的目标元素: 4.用insertBefore 方法插入到目标元素 ...
jQuery拖拽图片拼图验证插件
下载地址稳定的jQuery拖拽滑动拼图验证,使用jquery实现的滑动验证插件. dd:
html 拖放插件,DAD – jQuery拖拽/拖放插件
DAD – jQuery拖拽/拖放插件分类:代码日期:2016-08-02 点击(37,745) 下载(1) 来源:未知收藏简介 DAD 是一款基于 jQuery 的拖拽/拖放插件,它支持常见 ...
JQuery对元素拖拽排序，元素拖拽，JQuery拖拽
源码:JQuery拖动元素进行排序,JS元素拖动Demo-Javascript文档类资源-CSDN下载前阵子项目前端界面有一个拖动元素进行排序的功能,很是头疼(我一个后端人员,平时替补前端画个页面也 ...
鼠标拖拽建立选区，选中元素
个人博客网站欢迎交流:萤火之森:https://blog.xkongkeji.com 近段时间做一个编辑器,就需要一个鼠标拖拽选区的功能,方便批量选中元素,进行相应操作,所有就有了这篇文章. 效果展示 ...
jquery 磁铁模式控件_利用JQuery拖拽插件实现拖拽效果
asp教程x.cs" inherits="jquerydrag._default" %> $(document).ready(function() { //拖拽方法 ...

JQuery 拖拽元素,并移动其他元素位置

JQuery 拖拽元素,并移动其他元素位置

JQuery 拖拽元素,并移动其他元素位置相关推荐

最新文章

热门文章