javascript - 两个可放置区域第一个仅有效

Question

请参阅以下链接:http://liveweave.com/d8F0Qw

我有两个具有不同 ID 的可放置部分，我想将图像放置在不同的部分。问题是它对第一个 droppable 有效但对第二个无效。

如何检测可放置区域并将图像放在那里？

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();        
        }

        });
    };

})();