jquery编写一个可拖动排序的插件代码-html代码-BFW代码库

jquery编写一个可拖动排序的插件代码

代码语言：html

所属分类：其他

代码描述：jquery编写一个可拖动排序的插件代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            /**
            * @fileView 基于jQuery的简单拖动排序插件
            *
            * @param {Object} options
            *        {String} targetEle 可选，排序元素的DOM选择器字符串，默认li
            *        {object} replaceStyle 可选， 拖动时，占位元素的样式
            *        {object} dragStyle 可选， 拖动时，被拖动元素的样式
            *
            * @example $('#wrap').dragSort();
            *
            * @author 阿伦<https://github.com/ylb1992/drag-sort>
            **/
            (function($) {
                'use strict';
                $.fn.dragSort = function(options) {
                    var settings = $.extend(true, {
                        targetEle: 'li',
                        replaceStyle: {
                            'background-color': '#f9f9f9',
                            'border': '1px dashed #ddd'
                        },
                        dragStyle: {
                            'position': 'fixed',
                            'box-shadow': '10px 10px 20px 0 #eee'
                        }
                    }, options);

                    return this.each(function() {

                        // 由于有些浏览器的图片和链接是默认可以拖动的，所以屏蔽掉document的dragstart事件
                        document.ondragstart = function() {
                            return false;
                        }

                        var thisEle = $(this);
                        thisEle.on('mousedown.dragSort', settings.targetEle, function(event) {

                            var selfEle = $(this);

                            // 只允许鼠标左键拖动
                            if (event.which !== 1) {
                                return;
                            }

                            // 禁止在表单元素里面拖动
                            var tagName = event.target.tagName.toUpperCase();
                            if (tagName === 'INPUT' || tagName === 'TEXTAREA' || tagName === 'SELECT') {
                                return;
                            }

                            var moveEle = $(this);

                            var offset = selfEle.offset();
                            var rangeX = event.pageX - offset.left;
                            var rangeY = event.pageY - offset.top;

                            var replaceEle = selfEle.clone()
                            .css('height', selfEle.outerHeight())
                            .css(settings.replaceStyle)
                            .empty();
                            settings.dragStyle.width = selfEle.width();
                            var move = true;

                            $(document).on('mousemove.dragSort', function(event) {
                 .........完整代码请登录后点击上方下载按钮下载查看