* support mutiple targets to drop in in droppable.js.

assets/js/doc.js

@@ -119,16 +119,23 @@ $(function()
     {
         start: function()
         {
-            $('#droppableTarget').removeClass('panel-warning').removeClass('panel-success').find('.panel-heading').text('拖动到这里。');
+            $('.droppable-target').removeClass('panel-warning').removeClass('panel-success').find('.panel-heading').text('拖动到这里。');
         },
-        drop: function()
+        drop: function(event, target)
         {
             messager.show('真棒！');
-            $('#droppableTarget').addClass('panel-success').find('.panel-heading').text('成功拖到目的地。');
+            $('.droppable-target').removeClass('panel-success').removeClass('panel-warning');
+            if(target)
+            {
+                target.addClass('panel-success').find('.panel-heading').text('成功拖到目的地。');
+            }
         },
-        drag: function(event, isIn)
+        drag: function(event, isIn, target)
         {
-            $('#droppableTarget').toggleClass('panel-warning', isIn);
+            
+            $('.droppable-target').removeClass('panel-success').removeClass('panel-warning');
+            console.log(isIn);
+            if(target) target.addClass('panel-warning');
         }
     });
 });

dist/js/zui.min.js

@@ -2314,7 +2314,8 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
                 if (isSure != undefined && (!isSure)) return;
             }
 
-            var $target = $(setting.target),
+            var $targets = $(setting.target),
+                target = null,
                 $container = $(setting.container),
                 pos = $e.offset(),
                 isIn = false;
@@ -2337,55 +2338,68 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
 
             function mouseMove(event)
             {
-                var tPos = $target.offset();
                 var mX = event.pageX,
-                    mY = event.pageY,
-                    tX = tPos.left,
-                    tY = tPos.top,
-                    tW = $target.width(),
-                    tH = $target.height();
-
+                    mY = event.pageY;
+                    
                 $e.removeClass('drag-start').addClass('dragging');
+
                 shadow.addClass('dragging').css(
                 {
                     left : event.pageX-startOffset.x,
                     top  : event.pageY-startOffset.y
                 });
 
-                isIn = (mX > tX && mY > tY && mX < (tX + tW) && mY < (tY + tH));
-                $target.toggleClass('drop-in', isIn);
-                shadow.toggleClass('drop-in', isIn);
+                isIn = false;
+                var idx = -1;
+                $targets.removeClass('drop-in').each(function(index, el)
+                {
+                    var t = $(this);
+                    var tPos = t.offset();
+                    var tW = t.width(),
+                        tH = t.height(),
+                        tX = tPos.left,
+                        tY = tPos.top;
+
+                    if(mX > tX && mY > tY && mX < (tX + tW) && mY < (tY + tH))
+                    {
+                        isIn = true;
+                        target = t;
+                        idx = index;
+                        t.addClass('drop-in');
+                        return false;
+                    }
+                });
+                
                 $e.toggleClass('drop-in', isIn);
+                shadow.toggleClass('drop-in', isIn);
 
                 if(setting.hasOwnProperty('drag') && $.isFunction(setting['drag']))
                 {
-                    setting['drag'](event, isIn);
+                    setting['drag'](event, isIn, target, idx);
                 }
             }
 
             function mouseUp(event)
             {
-
+                if(!isIn) target = null;
+                var isSure = true;
                 if(setting.hasOwnProperty('beforeDrop') && $.isFunction(setting['beforeDrop']))
                 {
-                    setting['beforeDrop'](event, isIn);
+                    var isSure = setting['beforeDrop'](event, isIn, target);
+                    if (isSure != undefined && (!isSure)) isSure = false;
+                    else isSure = true;
                 }
 
-                if(isIn && setting.hasOwnProperty('drop') && $.isFunction(setting['drop']))
+                if(isSure && isIn && setting.hasOwnProperty('drop') && $.isFunction(setting['drop']))
                 {
-                    setting['drop'](event);
+                    setting['drop'](event, target);
                 }
 
                 $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
-                $target.removeClass('drop-in');
+                $targets.removeClass('drop-in');
                 $e.removeClass('dragging');
                 shadow.remove();
 
-                if(setting.hasOwnProperty('afterDrop') && $.isFunction(setting['afterDrop']))
-                {
-                    setting['afterDrop'](event, isIn);
-                }
-
                 event.preventDefault();
             }
         });

javascript.html

@@ -2122,16 +2122,30 @@ base_url: "./"
 
       <div class="example">
         <div class="row">
-          <div class="col-md-6">
+          <div class="col-md-3">
             <div class="panel">
               <div class="panel-heading">开始吧</div>
               <div class="panel-body" style="height: 100px">
-                <button type="button" class='btn btn-danger btn-lg' data-toggle='droppable' data-target='#droppableTarget'>拖动我</button>
+                <button type="button" class='btn btn-danger btn-lg' data-toggle='droppable' data-target='.droppable-target'>拖动我</button>
               </div>
             </div>
           </div>
-          <div class="col-md-6">
-            <div class="panel" id='droppableTarget'>
+          <div class="col-md-3">
+            <div class="panel droppable-target">
+              <div class="panel-heading">拖到这里</div>
+              <div class="panel-body" style="height: 100px">
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="panel droppable-target">
+              <div class="panel-heading">拖到这里</div>
+              <div class="panel-body" style="height: 100px">
+              </div>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <div class="panel droppable-target">
               <div class="panel-heading">拖到这里</div>
               <div class="panel-body" style="height: 100px">
               </div>

src/apps/ranzhi/js/zui.js

@@ -26,3 +26,5 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
 // @koala-append "../../../js/string.js"
 // @koala-append "../../../js/date.js"
 // @koala-append "../../../js/resize.js"
+// 
+// @koala-append "../../../js/droppable.js"

src/js/droppable.js

@@ -38,7 +38,8 @@
                 if (isSure != undefined && (!isSure)) return;
             }
 
-            var $target = $(setting.target),
+            var $targets = $(setting.target),
+                target = null,
                 $container = $(setting.container),
                 pos = $e.offset(),
                 isIn = false;
@@ -61,55 +62,68 @@
 
             function mouseMove(event)
             {
-                var tPos = $target.offset();
                 var mX = event.pageX,
-                    mY = event.pageY,
-                    tX = tPos.left,
-                    tY = tPos.top,
-                    tW = $target.width(),
-                    tH = $target.height();
-
+                    mY = event.pageY;
+                    
                 $e.removeClass('drag-start').addClass('dragging');
+
                 shadow.addClass('dragging').css(
                 {
                     left : event.pageX-startOffset.x,
                     top  : event.pageY-startOffset.y
                 });
 
-                isIn = (mX > tX && mY > tY && mX < (tX + tW) && mY < (tY + tH));
-                $target.toggleClass('drop-in', isIn);
-                shadow.toggleClass('drop-in', isIn);
+                isIn = false;
+                var idx = -1;
+                $targets.removeClass('drop-in').each(function(index, el)
+                {
+                    var t = $(this);
+                    var tPos = t.offset();
+                    var tW = t.width(),
+                        tH = t.height(),
+                        tX = tPos.left,
+                        tY = tPos.top;
+
+                    if(mX > tX && mY > tY && mX < (tX + tW) && mY < (tY + tH))
+                    {
+                        isIn = true;
+                        target = t;
+                        idx = index;
+                        t.addClass('drop-in');
+                        return false;
+                    }
+                });
+                
                 $e.toggleClass('drop-in', isIn);
+                shadow.toggleClass('drop-in', isIn);
 
                 if(setting.hasOwnProperty('drag') && $.isFunction(setting['drag']))
                 {
-                    setting['drag'](event, isIn);
+                    setting['drag'](event, isIn, target, idx);
                 }
             }
 
             function mouseUp(event)
             {
-
+                if(!isIn) target = null;
+                var isSure = true;
                 if(setting.hasOwnProperty('beforeDrop') && $.isFunction(setting['beforeDrop']))
                 {
-                    setting['beforeDrop'](event, isIn);
+                    var isSure = setting['beforeDrop'](event, isIn, target);
+                    if (isSure != undefined && (!isSure)) isSure = false;
+                    else isSure = true;
                 }
 
-                if(isIn && setting.hasOwnProperty('drop') && $.isFunction(setting['drop']))
+                if(isSure && isIn && setting.hasOwnProperty('drop') && $.isFunction(setting['drop']))
                 {
-                    setting['drop'](event);
+                    setting['drop'](event, target);
                 }
 
                 $(document).unbind('mousemove', mouseMove).unbind('mouseup', mouseUp);
-                $target.removeClass('drop-in');
+                $targets.removeClass('drop-in');
                 $e.removeClass('dragging');
                 shadow.remove();
 
-                if(setting.hasOwnProperty('afterDrop') && $.isFunction(setting['afterDrop']))
-                {
-                    setting['afterDrop'](event, isIn);
-                }
-
                 event.preventDefault();
             }
         });