列表拖动排序
来源：互联网 发布：python splinter教程 编辑：程序博客网 时间：2024/06/07 23:13
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Drag Arrange Example</title> <style> body { font-family: arial; background: rgb(242, 244, 246); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } h3 { color: rgb(199, 204, 209); font-size: 28px; text-align: center; } #elements-container { text-align: center; } .draggable-element { display: inline-block; width: 200px; height: 200px; background: white; border: 1px solid rgb(196, 196, 196); line-height: 200px; text-align: center; margin: 10px; color: rgb(51, 51, 51); font-size: 30px; cursor: move; } .drag-list { width: 400px; margin: 0 auto; } .drag-list > li { list-style: none; background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); margin: 5px 0; font-size: 24px; } .drag-list .title { display: inline-block; width: 130px; padding: 6px 6px 6px 12px; vertical-align: top; } .drag-list .drag-area { display: inline-block; background: rgb(158, 211, 179); width: 60px; height: 40px; vertical-align: top; float: right; cursor: move; } .code { background: rgb(255, 255, 255); border: 1px solid rgb(196, 196, 196); width: 600px; margin: 22px auto; position: relative; } .code::before { content: 'Code'; background: rgb(80, 80, 80); width: 96%; position: absolute; padding: 8px 2%; color: rgb(255, 255, 255); } .code pre { margin-top: 50px; padding: 0 13px; font-size: 1em; } </style> </head> <body> <section class="showcase showcase-2"> <h3>Example 2</h3> <ul class="drag-list"> </ul> </section> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="drag-arrange.js"></script> <script type="text/javascript"> $(function() { $(".drag-list").html("<li><span class='title'>list 6</span><span class='drag-area'></span></li><li><span class='title'>list 7</span><span class='drag-area'></span></li><li><span class='title'>list4</span><span class='drag-area'></span></li><li><span class='title'>list 8</span><span class='drag-area'></span></li><li><span class='title'>list 5</span><span class='drag-area'></span></li>"); // $('.draggable-element').arrangeable(); $('li').arrangeable({dragSelector: '.drag-area'}); }); </script> </body></html>/** * drag-shift * http://github.com/vishalok12 * Copyright (c) 2014 Vishal Kumar * Licensed under the MIT License. */'use strict';(function (factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['jquery'], factory); } else { // Browser globals factory(jQuery); }}(function ($) { var IS_TOUCH_DEVICE = ('ontouchstart' in document.documentElement); /** * mouse move threshold (in px) until drag action starts * @type {Number} */ var DRAG_THRESHOLD = 5; /** * to generate event namespace * @type {Number} */ var counter = 0; /** * Javascript events for touch device/desktop * @return {Object} */ var dragEvents = (function () { if (IS_TOUCH_DEVICE) { return { START: 'touchstart', MOVE: 'touchmove', END: 'touchend' }; } else { return { START: 'mousedown', MOVE: 'mousemove', END: 'mouseup' }; } }()); $.fn.arrangeable = function(options) { var dragging = false; var $clone; var dragElement; var originalClientX, originalClientY; // client(X|Y) position before drag starts var $elements; // list of elements to shift between var touchDown = false; var leftOffset, topOffset; var eventNamespace; if (typeof options === "string") { // check if want to destroy drag-arrange if (options === 'destroy') { if (this.eq(0).data('drag-arrange-destroy')) { this.eq(0).data('drag-arrange-destroy')(); } return this; } } options = $.extend({}, options); $elements = this; eventNamespace = getEventNamespace(); this.each(function() { // bindings to trigger drag on element var dragSelector = options.dragSelector; var self = this; var $this = $(this); if (dragSelector) { $this.on(dragEvents.START + eventNamespace, dragSelector, dragStartHandler); } else { $this.on(dragEvents.START + eventNamespace, dragStartHandler); } function dragStartHandler(e) { // a mouse down/touchstart event, but still drag doesn't start till threshold reaches // stopPropagation is compulsory, otherwise touchmove fires only once (android < 4 issue) e.stopPropagation(); touchDown = true; originalClientX = e.clientX || e.originalEvent.touches[0].clientX; originalClientY = e.clientY || e.originalEvent.touches[0].clientY; dragElement = self; } }); // bind mouse-move/touchmove on document // (as it is not compulsory that event will trigger on dragging element) $(document).on(dragEvents.MOVE + eventNamespace, dragMoveHandler) .on(dragEvents.END + eventNamespace, dragEndHandler); function dragMoveHandler(e) { if (!touchDown) { return; } var $dragElement = $(dragElement); var dragDistanceX = (e.clientX || e.originalEvent.touches[0].clientX) - originalClientX; var dragDistanceY = (e.clientY || e.originalEvent.touches[0].clientY) - originalClientY; if (dragging) { e.stopPropagation(); $clone.css({ left: leftOffset + dragDistanceX, top: topOffset + dragDistanceY }); shiftHoveredElement($clone, $dragElement, $elements); // check for drag threshold (drag has not started yet) } else if (Math.abs(dragDistanceX) > DRAG_THRESHOLD || Math.abs(dragDistanceY) > DRAG_THRESHOLD) { $clone = clone($dragElement); // initialize left offset and top offset // will be used in successive calls of this function leftOffset = dragElement.offsetLeft - parseInt($dragElement.css('margin-left')) - parseInt($dragElement.css('padding-left')); topOffset = dragElement.offsetTop - parseInt($dragElement.css('margin-top')) - parseInt($dragElement.css('padding-top')); // put cloned element just above the dragged element // and move it instead of original element $clone.css({ left: leftOffset, top: topOffset }); $dragElement.parent().append($clone); // hide original dragged element $dragElement.css('visibility', 'hidden'); dragging = true; } } function dragEndHandler(e) { if (dragging) { // remove the cloned dragged element and // show original element back e.stopPropagation(); dragging = false; $clone.remove(); dragElement.style.visibility = 'visible'; } touchDown = false; } function destroy() { $elements.each(function() { // bindings to trigger drag on element var dragSelector = options.dragSelector; var $this = $(this); if (dragSelector) { $this.off(dragEvents.START + eventNamespace, dragSelector); } else { $this.off(dragEvents.START + eventNamespace); } }); $(document).off(dragEvents.MOVE + eventNamespace) .off(dragEvents.END + eventNamespace); // remove data $elements.eq(0).data('drag-arrange-destroy', null); // clear variables $elements = null; dragMoveHandler = null; dragEndHandler = null; } this.eq(0).data('drag-arrange-destroy', destroy); }; function clone($element) { var $clone = $element.clone(); $clone.css({ position: 'absolute', width: $element.width(), height: $element.height(), 'z-index': 100000 // very high value to prevent it to hide below other element(s) }); return $clone; } /** * find the element on which the dragged element is hovering * @return {DOM Object} hovered element */ function getHoveredElement($clone, $dragElement, $movableElements) { var cloneOffset = $clone.offset(); var cloneWidth = $clone.width(); var cloneHeight = $clone.height(); var cloneLeftPosition = cloneOffset.left; var cloneRightPosition = cloneOffset.left + cloneWidth; var cloneTopPosition = cloneOffset.top; var cloneBottomPosition = cloneOffset.top + cloneHeight; var $currentElement; var horizontalMidPosition, verticalMidPosition; var offset, overlappingX, overlappingY, inRange; for (var i = 0; i < $movableElements.length; i++) { $currentElement = $movableElements.eq(i); if ($currentElement[0] === $dragElement[0]) { continue; } offset = $currentElement.offset(); // current element width and draggable element(clone) width or height can be different horizontalMidPosition = offset.left + 0.5 * $currentElement.width(); verticalMidPosition = offset.top + 0.5 * $currentElement.height(); // check if this element position is overlapping with dragged element overlappingX = (horizontalMidPosition < cloneRightPosition) && (horizontalMidPosition > cloneLeftPosition); overlappingY = (verticalMidPosition < cloneBottomPosition) && (verticalMidPosition > cloneTopPosition); inRange = overlappingX && overlappingY; if (inRange) { return $currentElement[0]; } } } function shiftHoveredElement($clone, $dragElement, $movableElements) { var hoveredElement = getHoveredElement($clone, $dragElement, $movableElements); if (hoveredElement !== $dragElement[0]) { // shift all other elements to make space for the dragged element var hoveredElementIndex = $movableElements.index(hoveredElement); var dragElementIndex = $movableElements.index($dragElement); if (hoveredElementIndex < dragElementIndex) { $(hoveredElement).before($dragElement); } else { $(hoveredElement).after($dragElement); } // since elements order have changed, need to change order in jQuery Object too shiftElementPosition($movableElements, dragElementIndex, hoveredElementIndex); } } function shiftElementPosition(arr, fromIndex, toIndex) { var temp = arr.splice(fromIndex, 1)[0]; return arr.splice(toIndex, 0, temp); } function getEventNamespace() { counter += 1; return '.drag-arrange-' + counter; }}));资源：http://download.csdn.net/detail/shiyuezhong/9827842
0 0
- 列表拖动排序
- 【unity拓展】使列表支持拖动排序（Reorderablelist）
- 移动端列表长按后上下拖动进行排序
- jQuery列表拖动排列
- div拖动并且排序
- js表格拖动排序
- Jtable 拖动排序
- TreeView 拖动排序
- 拖动table,li排序
- jquery 拖动排序|拖拽
- sortabl拖动排序
- jquery实现拖动排序
- 可拖动排序DIV
- GridView实现拖动排序
- 跨多个RecyclerView拖动排序
- ios 拖动重新排序
- table拖动行排序
- dom结构拖动排序
- MySQL的启动与Apache启动
- 安卓工具类之获取网络状态工具类
- 使用volley进行网络请求
- centos7编译安装最新版Git
- unity_shader入门 oneV
- 列表拖动排序
- AngularJs中组件、过滤器、自定义过滤器的使用
- Angular快速入门---过滤器篇
- NSDictionary、NSMutableDictionary的基本用法
- Spring Boot实战之Filter实现使用JWT进行接口认证
- 实现jQuery-form.js实现异步上传文件
- 浅谈Java三大特性--封装
- （四）数据库数据更新
- Mondriaan's Dream 瓷砖覆盖地板 编程之美
