在Canvas網格中拖放圖像

Question

我將矩形容器和圖像從菜單拖放到畫布網格上，然后移動它們。當前，我可以將它們多次加載到畫布上，並雙擊刪除它們，如下面的鏈接所示。

http://jsfiddle.net/Lucy1/wQ8YA/35/

我面臨的問題是，當我嘗試將容器和圖像拖放到畫布網格中時，它們正被放置在所需位置的右側。如果我嘗試將它們放置在畫布的左側然后將它們放到網格的中央，當我嘗試將它們放到網格的中央時，它們就會掉到網格的右側。 使它們可拖放的功能是

var $clone = ui.helper.clone();
// all clones are draggable
// if clone is shape then draggable + resizable
if (!$clone.is('.inside-droppable')) {
    $(this).append($clone.addClass('inside-droppable').draggable({
            containment: $stageContainer,
            tolerance: 'fit',
            cursor: 'pointer',
            position: 'relative'             
            }));

    if ($clone.is(".imag") === false) {
            $clone.resizable({
                containment: $stageContainer
            });          
    }
    $clone.on('dblclick', function () {
        $clone.remove();
        layer.draw();
    });
   }

我似乎無法理解上述功能在將容器和圖像拖放到畫布網格的所需位置時出了錯。

Answer 1

我沒有深入研究您的代碼，但是通過在拖放功能中添加以下行，可以正常工作

 $clone.css({top: y, left: x, position:'absolute'});

在此處查看演示