<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
body {
    font: 14px/1.5 "microsoft yahei", Helvetica, Tahoma, Arial, sans-serif;
    margin:0;padding:0;
}
.container {border-radius:4px;}
.container .scb1 ul,.container .scb2 ul {*min-height:250px;
    display: block;clear:both;overflow:hidden;
    margin:0;padding:0;}
.container .scb1 {   
    padding: 28px;
    
    background-color:#B9F0FA;
    background-position:0 0;
    
    background-image: -webkit-radial-gradient(circle, #CCF5F9,#A8E0F3 50%, #B3E9F2);

    background-image: -moz-radial-gradient(circle, #CCF5F9,#A8E0F3 50%, #B3E9F2);

    background-image: -ms-radial-gradient(circle, #CCF5F9,#A8E0F3 50%, #B3E9F2);

    
    
    background-repeat:no-repeat;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-top-left-radius: 4px;
    -moz-border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.container .scb2 {
    background-color: #F9FBFF;
    border-bottom: 1px solid #EBEFF6;
    -webkit-box-shadow: 0 -1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: 0 -1px 2px rgba(0, 0, 0, .05);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .05);
    padding: 18px 20px 28px;
}
.container ul li{
    display: block;
    width: 10%;
    float:left; 
    border-radius: 4px; 
    padding: 0;margin:0;
    list-style: none;
    -moz-user-select: none;
    user-select: none;
    color: #555;position:relative;
    text-align:center;
}

.container ul li:focus .shortcutminus {display:none;}
/*.container .scb1 li {
    background: url(__IMG__/index.png) no-repeat 30px -34px;}
*/
.container .shortcutmenu {    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    float: left;
    padding: 14px 22px;
    border: 1px dashed transparent;
    position: relative;
    text-align: center;}
    
.container .scb1 .shortcutmenu {
    padding: 14px 23px;
    border: 0 none;
}
.container .scb2 li:hover .shortcutmenu {
    border-color: #EE8C0C;
}
.container scb1 .shortcutmenu {
    border: 0 none;
    position: absolute;
    position:relative;
}
.container .shortcutminus,.container .shortcutplus {
    position: absolute;
    top: 6px;
    right: 22px;
    width: 22px;
    height: 22px;
    background: url(__IMG__/index.png) no-repeat;
    z-index:3;
}
.container .shortcutminus {
    background-position: -190px 0;
}
.container .shortcutplus {
    background-position: -160px 0;
    display: none;
}
.container .scb2 li:hover .shortcutplus {display:block;}
.container .shortcutmenu .shortcutmenuicon img{
    width:64px;height:64px;
    max-width: 100%;
    width: auto\9;
    vertical-align: middle;
}
.container .shortcutmenu .shortcutmenutitle {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 10px;
    padding:0;
    margin: 8px 0 0;
    width: 74px;
    height: 20px;line-height:20px;
    background-color: #91A3AE;
    background-color: rgba(56, 60, 65, .4);
    font-size: 12px;
    color: #FFF;white-space:nowrap;overflow:hidden;
}
.container .scb2 h5{    margin: 0 0 10px;
    font-size: 14px;color:#82939e;
    font-weight: 700;}



.container ul li font{ display:block; width:100%; height:30px;font-size: 14px; font-weight: bold;}
.container ul h3{ color: #0c8fff;
    display: block;
    height: 20px;
    margin: 0 auto;
    padding-left: 10px;
    border-left: 3px solid #0c8fff;}
    
.shortcutbtn{clear:both;overflow:hidden;
    padding: 10px 20px;}

.shortcutbtn .defaultbtn {float:right;
    padding: 9px 20px;
    font-size: 14px;
    font-family: Arial, "Microsoft Yahei";
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #dadce6;
    border-radius: 4px;
    white-space: nowrap;
    
    background-color: #f8f8f8;
    border-color: #dadce6;
    color: #fff;
    -webkit-transition: background linear 0.1s;
    -moz-transition: background linear 0.1s;
    -o-transition: background linear 0.1s;
    transition: background linear 0.1s;
    -webkit-box-shadow: inset 0 1px 0 #ffffff;
    box-shadow: inset 0 1px 0 #ffffff;
    color: #82939e;
}
.shortcutbtn .primatybtn {    background-color: #3497db;
    border-color: #2081c7;
    color: #fff;
    -webkit-transition: background linear 0.1s;
    -moz-transition: background linear 0.1s;
    -o-transition: background linear 0.1s;
    transition: background linear 0.1s;
    -webkit-box-shadow: inset 0 1px 0 #75b8e7;
    box-shadow: inset 0 1px 0 #75b8e7;
    margin-left:5px;
}

.shortcutbox {}

.shortcut li {width: 20%;
    float: left;
    text-align: center;
    height: 120px;margin-top:5px;}
.shortcut li a {display:block;padding-top:16px;color:#404040;}
.shortcut li a:hover {border:none;color:#3EAFE1;}
.shortcut li img {width:50px;height:50px;}
.shortcut li font {    display: block;
    width: 100%;
    text-align: center;
    margin-top: 10px;}


</style>
</head>
<body>


<div class="container">
    <div class=" shortcutbox scb1">
            <ul class="weise jsws" style="height:122px;">            
            <volist name=":get_kuaijie(1)" id="my">
                <li data-v="{$my.id}">
                    <div class="jsshortcut shortcutmenu" >
                    <a href="javascript:;" class="shortcutminus jsminus"></a>
                        <div class="shortcutmenuicon" title="{$my.title}">
                            <img src="{:get_cover($my['value'],'path')}">
                        </div>
                        <p class="shortcutmenutitle">{:L($my['title'])}</p>
                    </div>
                </li>
            </volist>
            </ul>
    </div>
    
    <div class=" shortcutbox scb2" >
            <h5>未添加的模块</h5>
            <ul class="jss">
            <volist name=":get_kuaijie(2)" id="wei">
                <li data-v="{$wei.id}">
                    <div class="jsshortcut shortcutmenu" >
                    <a href="javascript:;" class="shortcutplus jsplus"></a>
                        <div class="shortcutmenuicon" title="{$wei.title}">
                            <img src="{:get_cover($wei['value'],'path')}">
                        </div>
                        <p class="shortcutmenutitle">{:L($wei['title'])}</p>
                    </div>
                </li>
            </volist>
            </ul>
    </div>
    <div class="shortcutbtn"><a id="save" class="defaultbtn primatybtn">保存设置</a><a id="huifu" class="defaultbtn">恢复原定义设置</a></div>
</div>

<script type="text/javascript" src="__STATIC__/jquery-2.0.3.min.js"></script>
<script src="__STATIC__/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript">
function plus(that,index) {
    var jspp = that.closest('li'),jsws = $('.jsws');
        if (jsws.find('li').length<10) {
            var jp = jspp.clone(),jss = $('.jss');
            jp.find('.jsplus').removeClass('shortcutplus jsplus').addClass('shortcutminus jsminus');
            jspp.remove();
            jp.on('click',function(){minus($(this),index);return false;});
            jsws.append(jp);
            if (jss.find('li').length>10) {jss.height(244);}
            else {jss.height(122);}
            parent.layer.iframeAuto(index);
        }else{
            layer.msg('已经添加10个,不能再添加了');
        } 
}
function minus(that,index){
    var jsmp = that.closest('li'),jss = $('.jss');
        var jm = jsmp.clone();
        jm.find('.jsminus').removeClass('shortcutminus jsminus').addClass('shortcutplus jsplus');
        jsmp.remove();
        jm.on('click',function(){plus($(this),index);return false;});
        jss.append(jm);
        
        if (jss.find('li').length>10) {jss.height(244);}
        else {jss.height(122);}
        parent.layer.iframeAuto(index);
}
$(function(){
    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    
    parent.layer.iframeAuto(index);
    
    //出入允许拖拽节点的父容器,一般是ul外层的容器
    if($('.jss li').length>10){
        $(".jss").attr('style','height:244px;');parent.layer.iframeAuto(index);
    }
    //drag.init('container');
    
    $('.container li').delegate('.jsminus','click',function(){
        minus($(this),index);
        return false;
    });
    $('.container li').delegate('.jsplus','click',function() {
        plus($(this),index);
        return false;
    });
    $("#huifu").click(function(){
        location.reload();
    });
    $("#save").click(function(){
        var $sees='',num=0;
        $(".weise li").each(function(){
            $sees=$sees+$(this).attr('data-v')+',';num++;
        });
        if (num<10) {layer.msg('必须选10个');return false;}
        $.ajax({
            type: "post",
            url: '{:U("Index/savekuaijie")}',
            data: {kuaijie:$sees},
            dataType: "json",
            success: function(data){
                if(data.status){
                    layer.msg('保存成功');
                }else{
                    layer.msg('保存失败');
                }
                top.location.reload();
            },
            error:function(){
                alert("服务器故障!");
            }
        });
    });
});


/** 拖拽功能实现原理和说明:

1、说明:拖拽实现一般有两种方式,一种是使用html的新特性dragable,但是由于在火狐浏览器上dragable每拖拽一次会打开一个新的标签,
尝试阻止默认行为和冒泡都无法解决,所以使用第二种方法来实现拖拽。第二种方法是使用js监听鼠标三个事件,配合节点操作来实现。

2、实现原理:
    01-在允许拖拽的节点元素上,使用on来监听mousedown(按下鼠标按钮)事件,鼠标按下后,克隆当前节点
    02-监听mousemove(鼠标移动)事件,修改克隆出来的节点的坐标,实现节点跟随鼠标的效果
    03-监听mouseup(放开鼠标按钮)事件,将原节点克隆到鼠标放下位置的容器里,删除原节点,拖拽完成。

3、优势:
    01-可动态添加允许拖拽的节点(因为使用了on委托事件)
    02-可获取到原节点,跟随节点,目标节点的对象,可根据需要进行操作。
    03-使用js实现,兼容性好。
**/


//拖拽
var drag = {

    class_name : null,  //允许放置的容器
    permitDrag : false, //是否允许移动标识

    _x : 0,             //节点x坐标
    _y : 0,             //节点y坐标
    _left : 0,          //光标与节点坐标的距离
    _top : 0,           //光标与节点坐标的距离

    old_elm : null,     //拖拽原节点
    tmp_elm : null,     //跟随光标移动的临时节点
    new_elm : null,     //拖拽完成后添加的新节点

    //初始化
    init : function (className){

        //允许拖拽节点的父容器的classname(可按照需要,修改为id或其他)
        drag.class_name = className;

        //监听鼠标按下事件,动态绑定要拖拽的节点(因为节点可能是动态添加的)
        $('.' + drag.class_name).on('mousedown', 'ul li', function(event){
            //当在允许拖拽的节点上监听到点击事件,将标识设置为可以拖拽
            drag.permitDrag = true;
            //获取到拖拽的原节点对象
            drag.old_elm = $(this);
            //执行开始拖拽的操作
            drag.mousedown(event);
            return false;
        });

        //监听鼠标移动
        $(document).mousemove(function(event){
            //判断拖拽标识是否为允许,否则不进行操作
            if(!drag.permitDrag) return false;
            //执行移动的操作
            drag.mousemove(event);
            return false;
        });

        //监听鼠标放开
        $(document).mouseup(function(event){
            //判断拖拽标识是否为允许,否则不进行操作
            if(!drag.permitDrag) return false;
            //拖拽结束后恢复标识到初始状态
            drag.permitDrag = false;
            //执行拖拽结束后的操作
            drag.mouseup(event);
            return false;
        });

    },

    //按下鼠标 执行的操作
    mousedown : function (event){

        //console.log('我被mousedown了');
        //1.克隆临时节点,跟随鼠标进行移动
        drag.tmp_elm = $(drag.old_elm).clone();
        //2.计算 节点 和 光标 的坐标
        drag._x = $(drag.old_elm).offset().left;
        drag._y = $(drag.old_elm).offset().top;

        var e = event || window.event;
        drag._left = e.pageX - drag._x;
        drag._top = e.pageY - drag._y;

        //3.修改克隆节点的坐标,实现跟随鼠标进行移动的效果
        $(drag.tmp_elm).css({
            'position' : 'absolute',
            // 'background-color' : '#FF8C69',
            'left' : drag._x-5,
            'top' : drag._y-30,
        });
        
        $(drag.tmp_elm).find('.jsminus').removeClass('shortcutminus jsminus').addClass('shortcutplus jsplus');

        //4.添加临时节点
        tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
        drag.tmp_elm = $(tmp).find(drag.tmp_elm);
        $(drag.tmp_elm).css('cursor', 'move');

    },

    //移动鼠标 执行的操作
    mousemove : function (event){

        //console.log('我被mousemove了');

        //2.计算坐标
        var e = event || window.event;
        var x = e.pageX - drag._left;
        var y = e.pageY - drag._top;
        var maxL = $(document).width() - $(drag.old_elm).outerWidth();
        var maxT = $(document).height() - $(drag.old_elm).outerHeight();
        //不允许超出浏览器范围
        x = x < 0 ? 0: x;
        x = x > maxL ? maxL: x;
        y = y < 0 ? 0: y;
        y = y > maxT ? maxT: y;

        //3.修改克隆节点的坐标
        $(drag.tmp_elm).css({
            'left' : x-5,
            'top' : y-30,
        });

        //判断当前容器是否允许放置节点
        $.each($('.' + drag.class_name + ' ul'), function(index, value){
            //获取容器的坐标范围 (区域)
            var box_x = $(value).offset().left;     //容器左上角x坐标
            var box_y = $(value).offset().top;      //容器左上角y坐标
            var box_width = $(value).outerWidth();  //容器宽
            var box_height = $(value).outerHeight();//容器高
            
            //给可以放置的容器加背景色
            /*if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y && e.pageY < box_y-0+box_height){

                //判断是否不在原来的容器下(使用坐标进行判断:x、y任意一个坐标不等于原坐标,则表示不是原来的容器)
                if($(value).offset().left !== drag.old_elm.parent().offset().left 
                || $(value).offset().top !== drag.old_elm.parent().offset().top){
                    
                    //$(value).css('background-color', '#FFEFD5');
                }
            }else{
                //恢复容器原背景色
                //$(value).css('background-color', '#FFFFF0');
            }*/

        });

    },

    //放开鼠标 执行的操作
    mouseup : function (event){

        //console.log('我被mouseup了');
        //移除临时节点
        $(drag.tmp_elm).remove();

        //判断所在区域是否允许放置节点
        var e = event || window.event;

        $.each($('.' + drag.class_name + ' ul'), function(index, value){

            //获取容器的坐标范围 (区域)
            var box_x = $(value).offset().left;     //容器左上角x坐标
            var box_y = $(value).offset().top;      //容器左上角y坐标
            var box_width = $(value).outerWidth();  //容器宽
            var box_height = $(value).outerHeight();//容器高
            //判断放开鼠标位置是否想允许放置的容器范围内
            if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y && e.pageY < box_y-0+box_height){
                //判断是否不在原来的容器下(使用坐标进行判断:x、y任意一个坐标不等于原坐标,则表示不是原来的容器)
                // &&$('.weise li').length<10
                //console.log($(this).attr('class'));
                //console.log($('.weise li').length);
                //console.log($('.jss li').length);
                if($(this).attr('class')=='jss'&&$('.jss li').length>=10){
                    $(".jss").attr('style','height:380px');
                }else if($(this).attr('class')=='weise'&&$('.weise li').length<=10&&$('.jss li').length<=11){
                    $(".jss").attr('style','height:195px');
                }

                if($(this).attr('class')=='weise'&&$('.weise li').length>=10){
                    //console.log('超过10个了');
                    //layer.msg('添加的模块已超过10个了,如要添加,请去掉后再添加');
                }else{
                    if($(value).offset().left !== drag.old_elm.parent().offset().left 
                    || $(value).offset().top !== drag.old_elm.parent().offset().top){
                        //向目标容器添加节点并删除原节点
                        tmp = $(drag.old_elm).clone();
                        var newObj = $(value).append(tmp);
                        $(drag.old_elm).remove();
                        //获取新添加节点的对象
                        drag.new_elm = $(newObj).find(tmp);
                    }
                }
            }
            //恢复容器原背景色
           // $(value).css('background-color', '#fbfbfd');
        });

    },

};

</script>

</body>
</html>