兩個可投放區域第一個作品只

Question

見下面鏈接：http://liveweave.com/d8F0Qw

我有不同的ID，我想在不同的部分下降圖像的兩個投擲的部分。 問題一，它對第一滴可行，但不適用於第二。

如何檢測可放置區域和放置圖像？

HTML代碼：

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script> 
     <script src="http://fabricjs.com/lib/fabric.js"></script> 


     <div id="wrapper"> 
<table> 
<tr valign="top"> 
<td> 
      <ul id="image-list"><li><img src="http://www.gettyimages.com/CMS/Pages/ImageCollection/StaticContent/image1_%20164248809.jpg" class="draggable-image"></li> 
      </ul> 
</td><td> 
      <div id="content"> 
      <table> 
       <tr><td> 
        <canvas id="canvas" width="320" height="256"> 
        </canvas> 
       <div id="canvas-drop-area"></div> 
       </td></tr> 
       <tr><td> 
        <canvas id="canvas1" width="320" height="256"> 
        </canvas> 
       <div id="canvas-drop-area1"></div> 
       </td></tr>    
      </table> 

       <!--div id="canvas-drop-area"></div--> 
      </div> 
</td><td> 
      <ul id="image-list"><li><img src="http://upload.wikimedia.org/wikipedia/commons/c/c3/Aurora_as_seen_by_IMAGE.PNG" class="draggable-image"></li> 
      </ul> 

</td></tr> 

</table> 
     </div> 

javascript代碼：

(function() { 
    var canvas = new fabric.Canvas('canvas'); 
    var canvas_el = document.getElementById('canvas'); 

    var canvas1 = new fabric.Canvas('canvas1'); 


    $(document).ready(function() { 



     /* Define drag and drop zones */ 
     var $drop = $('#canvas-drop-area'), 
      $drop1 = $('#canvas-drop-area1'), 
      $gallery = $('td > #image-list li'), 
      $draggedImage=null; 

     /* Define the draggable properties */ 
     $gallery.draggable({ 
      helper: 'clone', 
      start: function (e) { 
      $draggedImage=event.target; 
       $drop.css({ 
        'display': 'block' 
       }) 
      }, 
      stop: function() { 
       $(this).find('img').css({ 
        /* 'opacity': 0.4 */ 
       }); 
       $drop.css({ 
        'display': 'none' 
       }); 
       $draggedImage=null; 
      }, 
      revert: true 
     }); 

     /* Define the events for droppable properties */ 
     $drop.droppable({ 
      over: function (event, ui) { 
       $(this).addClass('active'); 
      }, 
      drop: function (event, ui) { 
       var image =$draggedImage&& $draggedImage.src; 
       console.log($draggedImage.alt); 
       img_to_canvas(image,$draggedImage.alt,1); 
      }, 
      out: function (event, ui) { 
       $(this).removeClass('active'); 
      }, 
      deactivate: function (event, ui) { 
       $(this).removeClass('active'); 
      } 
     }); 



     $drop1.droppable({ 
      over: function (event, ui) { 
       $(this).addClass('active'); 
      }, 
      drop: function (event, ui) { 
       var image =$draggedImage&& $draggedImage.src; 
       console.log($draggedImage.alt); 
       img_to_canvas(image,$draggedImage.alt,2); 
      }, 
      out: function (event, ui) { 
       $(this).removeClass('active'); 
      }, 
      deactivate: function (event, ui) { 
       $(this).removeClass('active'); 
      } 
     }); 


    }); 


    var img_to_canvas = function(image,sendfront,checkcanvas) { 
     var img = new Image(); 
     img.src = image; 
     fabric.Image.fromURL(img.src, function (source) { 
      img = source.set({ 
       left: 0, 
       top: 0, 
       angle: 0, 
       id:sendfront 
      }); 
     if(checkcanvas=='1'){ 
      canvas.add(img); 
      if(sendfront=='start'){ 
       canvas.sendToBack(img); 
      } 
      canvas.renderAll(); 
     }else{ 
      canvas1.add(img); 
      if(sendfront=='start'){ 
       canvas1.sendToBack(img); 
      } 
      canvas1.renderAll();   
     } 

     }); 
    } 




})(); 

Answer 1

這裏是解決http://liveweave.com/0RgVc6
觀察var $drop = $('#canvas-drop-area,#canvas-drop-area1')和我刪除$drop1你可以從下面的代碼

(function() { 
    var canvas = new fabric.Canvas('canvas'); 
    var canvas_el = document.getElementById('canvas'); 
    var canvas1 = new fabric.Canvas('canvas1'); 

    $(document).ready(function() { 
     /* Define drag and drop zones */ 
     var $drop = $('#canvas-drop-area,#canvas-drop-area1'), 
      $gallery = $('td > #image-list li'), 
      $draggedImage=null; 

     /* Define the draggable properties */ 
     $gallery.draggable({ 
      helper: 'clone', 
      start: function (e) { 
       $draggedImage=event.target; 
       $drop.css({ 'display': 'block' }); 
      }, 
      stop: function() { 
       $(this).find('img').css({ 
        /* 'opacity': 0.4 */ 
       }); 
       $drop.css({ 
        'display': 'none' 
       }); 
       $draggedImage=null; 
      }, 
      revert: true 
     }); 

     /* Define the events for droppable properties */ 
     $drop.droppable({ 
      over: function (event, ui) { 
       $(this).addClass('active'); 
      }, 
      drop: function (event, ui) { 
       var image =$draggedImage&& $draggedImage.src; 
       console.log($draggedImage.alt); 

       img_to_canvas(image,$draggedImage.alt,$(event.target).is("#canvas-drop-area")?1:2); 
      }, 
      out: function (event, ui) { 
       $(this).removeClass('active'); 
      }, 
      deactivate: function (event, ui) { 
       $(this).removeClass('active'); 
      } 
     }); 

    }); 


    var img_to_canvas = function(image,sendfront,checkcanvas) { 
     var img = new Image(); 
     img.src = image; 
     fabric.Image.fromURL(img.src, function (source) { 
      img = source.set({ 
       left: 0, 
       top: 0, 
       angle: 0, 
       id:sendfront 
      }); 
     if(checkcanvas=='1'){ 
      canvas.add(img); 
      if(sendfront=='start'){ 
       canvas.sendToBack(img); 
      } 
      canvas.renderAll(); 
     }else{ 
      canvas1.add(img); 
      if(sendfront=='start'){ 
       canvas1.sendToBack(img); 
      } 
      canvas1.renderAll();   
     } 

     }); 
    }; 

})();