结构-行为-样式-JqueryUI拖放使用实例（全）

 最近工作中有个需要是动态配置页面，想到之前公司有做过类似的，用的是JqueryUi，所以就看了下它的Api。下面就是我做的小Demo，想用的同学可以参考：

Html：

       <div class="page-component">
            <div class="pct-content">
                <div  class="btn btn-default special"  id="one" >我是可以拖动的对象</div>
            </div>
        </div>
        <div id="dropzone" class="dropzone"></div>

 

 

 Js：

$(
  $("#dropzone").droppable({
                    scope:"tasks",//域，拖动的域与拖放的域要相同才可以放进去
                    accept: ".special",//接受的Drag对象中要有的类
                    tolerance: "fit",//元素在什么情况下才算是拖放进入了Droppable区域，FIT就是全部进入才算进入
                    drop:function(event,ui){//放，这个动作的回调函数
                        var uid = ui.draggable[0].id;
                        var dropzone = $("#dropzone").offset();//得到相对drop区域的绝对位置
                        var oleft = ui.position.left - dropzone.left;//得到相对drop区域的绝对位置
                        var otop  = ui.position.top  - dropzone.top;//得到相对drop区域的绝对位置
                        $(this).append($("<div class='cloneele' style='left:"+oleft+"px;top:"+otop+"px;'><a href='javascript:;' class='close ' ><i class='glyphicon glyphicon-remove'></i></a><img src='images/component/"+uid+".png'/></div>"));
                         $(".cloneele").draggable({
                            opacity: 0.35,
                            revert: function(a){//控制已经拖放进入Drop区域的元素只能在Drop区域拖动
                                var c = $(this)[0];
                                var t = c.style;
                                var d = $("#dropzone")[0];
                                var ch = d.clientHeight;
                                var cw = d.clientWidth;
                                var num_left = parseFloat(t.left.split("px")[0]);
                                var num_top = parseFloat(t.top.split("px")[0]);
                                if(num_left<0 || num_left + c.clientWidth - cw > 0 || num_top < 0 || num_top + c.clientHeight - ch > 0 ){
                                    return true;
                                }else{
                                    return false;
                                }
                            },
                            snap: true,//自动吸附
                            cursor: "pointer"//拖动鼠标指针
                            }).resizable();
                        //删除添加进入Drop区域的元素
                        $(".dropzone .close").bind('click',function(){
                            $(this).parent().remove();
                        });
                        //drag了一次的元素不能再拖动
                        $( "#"+uid ).draggable( "option", "disabled", true );
                    }
                });

                $(".special").draggable({
                    helper:"clone",//设置拖动类型为克隆
                    opacity: 0.35,//拖动对象的透明度
                    snap: true,//自动吸附
                    cursor: "pointer",//拖动鼠标指针
                    appendTo: "body",
                    scope:"tasks"//域，拖动的域与拖放的域要相同才可以放进去
                });  
);