js easyui拖拽效果

<html>
<head>
    <link rel="stylesheet" href="../Using/easyui.css"/>
    <link rel="stylesheet" href="../Using/icon.css"/>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    <style type="text/css">
        #source_list {
            width: 100px;
            height: auto;
            border: 1px solid #ccc;
            float: left;
        }

        .source_item1 {
            width: 50px;
            height: 70px;
            border: 1px solid green;
            margin-top: 10px;
            margin-left: 0px;
        }
        .source_item2 {
            width: 20px;
            height: 30px;
            border: 1px solid green;
            margin-top: 10px;
            margin-left:0px;
        }
         .source_item3 {
            width: 40px;
            height: 60px;
            border: 1px solid green;
            margin-top: 10px;
            margin-left: 0px;
        }
         .source_item4 {
            width: 40px;
            height:70px;
            border: 1px solid green;
            margin-top: 10px;
            margin-left: 0px;
        }





        #source_content {
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            float: left;
            margin-left: 100px;
        }

        .source_item_temp {
            width: 50px;
            height: 50px;
            background: cyan;
        }
    </style>
    <script type="Text/javascript">
        $(function() {
            var data = {"total":0,"mm":[]};
            $(".source_item").draggable({
                revert:true,        //拖拽后元素回到原位置
                deltaX:10,          //拖拽时元素相对于鼠标点的X坐标
                deltaY:10
                 proxy:function(source){     //自定义拖拽样式
                 var area=$('<div class="source_item_temp"></div>');
                 area.html($(source).html()).appendTo('body');
                 return area;
                 }
            });
            $("#source_content").droppable({
                accept:'.source_item',      //#soucre_content接受.source_item元素
                  onDragEnter:function(e,source){     //拖拽进入该层时触发
                 $(this).html("<ul id='bb'></ul>");           //这个层的出现元素进入提示
                 },
                 onDragLeave:function(e,source){     //拖拽离开时触发
                 $(this).html('元素离开');           //出现元素离开提示
                 },
                onDrop:function(e, source) {//元素被放置时触发
                  
                    addProduct($(source).html(), $("#source_content").html())
                }
            });

            function addProduct(price, aa) {
                function add() {
                    alert(aa.indexOf(price))
                    if (aa.indexOf(price) >= 0) {
                        return;
                    }
                    $("#source_content").append(price);
                }

                add();
            }
        });
    </script>
</head>
<body>
<!--资源列表-->
<div id="source_list">
    <div style="background:#ccc;text-align:center">资源列表</div>
    <ul class="source_item">
        <div class="source_item1">苹果</div>
    </ul>
    <ul class="source_item">
        <div class="source_item2">桃子</div>
    </ul>
    <ul class="source_item">
        <div class="source_item3">香蕉</div>
    </ul>
    <ul class="source_item">
        <div class="source_item4">橘子</div>
    </ul>
</div>
<!--资源容器-->
<div id="source_content">

</div>
</body>
</html>

posted @ 2012-12-10 16:45  love-java  阅读(484)  评论(0)    收藏  举报