拖动;在Canvas网格中删除图像

时间:2014-08-13 06:49:47

标签: javascript jquery drag-and-drop kineticjs

我将矩形容器和图像从菜单拖放到画布网格上,然后移动它们。目前我可以将它们多次加载到画布上并在双击时删除它们如下面的链接所示。

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

我面临的问题是,当我试图拖延时将容器和图像放在画布网格中,它们将被放置在所需位置的右侧。如果我尝试将它们放在网格的左侧,那么它们会掉落在网格的中心,当我&# 39;我试图将它们放在网格的中心,它们会在网格的右侧掉落。使它们可拖动和可拖放的功能是

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

我似乎无法理解我在上述功能中出错的地方拖拽&将容器和图像放在画布网格的所需位置。请帮助

1 个答案:

答案 0 :(得分:1)

我没有深入研究你的代码,但是通过在dragdrop函数中添加以下行,它可以正常工作

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

SEE DEMO HERE