Javascript 使用jqueryui在画布上拖放图像

我已经完成了按钮和导航栏的拖放，拖放后也可以拖动，工作正常

但现在的问题是，我想拖放图像。我尝试了许多不同的方法，但都无法做到这一点

---

Thanx

我现在正在处理一个与您类似的项目，但在左分区中，我有一个列表，每个可拖动的元素都是一个列表项。此功能非常适合我，可能对您有用：

        $('#streams li').draggable({
            helper: 'clone',
            revert: 'invalid'
        });
        //Function for setting drag and drop settings
        function foo(){
            $('.foo').each(function() {
                //Making dropped elements draggable again
                $('.foo').draggable({
                    containment: $(this).parent(),
                    stack: '.foo',
                    snap: '.foo',
                    drop: function (event, ui) {
                        var pos = ui.draggable.offset(), dPos = $(this).offset();
                        alert("nodeid: " + ui.draggable.data("noteid") + 
                            ", Top: " + (pos.top - dPos.top) + 
                            ", Left: " + (pos.left - dPos.left));
                    },
                    drag: function(){
                        var draggedItemId = $(this).attr('id');
                        $(this).css({'z-index': '11'});
                        $(".class"+draggedItemId).css({'z-index':'15'});
                    },
                    stop: function(){
                        var draggedItemId = $(this).attr('id');
                        $(this).css({'z-index': '0'});
                        $(".class"+draggedItemId).css({'z-index':'10'});
                    }
                });
            });
        }
        var fooCount = $('.foo').length;
        //Generating new table after drop
        $('#mainDiv').droppable({
            drop: function(event, ui) {
                //Getting position where new item was dropped
                var pos = ui.draggable.offset(), dPos = $(this).offset();
                var droppedTop = ui.position.top - $(this).offset().top;
                var droppedLeft = ui.position.left - $(this).offset().left;
                //Generating new table if the item is dropped first time
                if (!ui.draggable.hasClass('foo')) {
                    var Class = ui.draggable.attr("class");
                    var title = ui.draggable.text().trim();
                    var item = $('<table class="foo small elementTable ' + Class + '" name="' + title + '" id="'+(fooCount+1)+'" style="left: '+droppedLeft+'px; top: '+droppedTop+'px;"><tr class="tableHeader"><th class="thClass"><span class="header">' + title + '</span><span class="settings"><img src="Icons/pignon.png" width="17px" height="17px" alt="Settings" title="Settings" /></span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>');
                    $(this).append(item);
                    fooCount += 1;
                    foo();
                }
            }
        });

$（'#streams li'）。可拖动({
助手：“克隆”，
回复：“无效”
});
//用于设置拖放设置的函数
函数foo（）{
$（'.foo'）。每个（函数（）{
//使丢弃的元素再次可拖动
$（'.foo'）.draggable({
包含：$（this）.parent（），
堆栈：'.foo'，
快照：'.foo'，
drop：函数（事件、用户界面）{
var pos=ui.draggable.offset（），dPos=$（this.offset（）；
警报（“nodeid:+ui.draggable.data”（“noteid”）+
，顶部：“+（pos.Top-dPos.Top）+
，左：“+（位置左-dPos.Left））；
},
拖动：函数（）{
var draggedItemId=$（this.attr（'id'）；
$（this.css（{'z-index'：'11'）；
$（“.class”+draggedItemId.css（{'z-index'：'15'}）；
},
停止：函数（）{
var draggedItemId=$（this.attr（'id'）；
$（this.css（{'z-index'：'0'）；
$（“.class”+draggedItemId.css（{'z-index'：'10'}）；
}
});
});
}
var fooCount=$（'.foo'）.length；
//删除后生成新表
$（'#mainDiv'）。可拖放({
drop：函数（事件、用户界面）{
//获取新项目被丢弃的位置
var pos=ui.draggable.offset（），dPos=$（this.offset（）；
var droppedTop=ui.position.top-$（this）.offset（）.top；
var droppedLeft=ui.position.left-$（this.offset（）.left；
//如果第一次删除该项，则生成新表
如果（！ui.draggable.hasClass（'foo'））{
var Class=ui.draggable.attr（“类”）；
var title=ui.draggable.text（）.trim（）；
变量项=$（''+标题+'添加新链接'）；
$（本）。追加（项目）；
食物计数+=1；
foo（）；
}
}
});

试着重写你的函数，给它类似的外观。还可以将DOM结构从单独的元素更改为列表，这将帮助您轻松实现拖放。这是小提琴：

---

编辑：这是你的小提琴。我已经初始化了拖放。其余部分、样式以及在删除内容时对内容所做的操作都由您决定：

您能放一把小提琴吗please@Khan完成。我的应用程序非常大和复杂，但我只包含了创建DOM和初始化拖放所需的内容。不需要编辑我的小提琴，只需要放置一些列表项更改html调用你的类，这样我就可以看到它是如何工作的“我试过了，但不起作用me@Khan我编辑了你的小提琴，并写了一些说明作为评论。造型由你决定。

        $('#streams li').draggable({
            helper: 'clone',
            revert: 'invalid'
        });
        //Function for setting drag and drop settings
        function foo(){
            $('.foo').each(function() {
                //Making dropped elements draggable again
                $('.foo').draggable({
                    containment: $(this).parent(),
                    stack: '.foo',
                    snap: '.foo',
                    drop: function (event, ui) {
                        var pos = ui.draggable.offset(), dPos = $(this).offset();
                        alert("nodeid: " + ui.draggable.data("noteid") + 
                            ", Top: " + (pos.top - dPos.top) + 
                            ", Left: " + (pos.left - dPos.left));
                    },
                    drag: function(){
                        var draggedItemId = $(this).attr('id');
                        $(this).css({'z-index': '11'});
                        $(".class"+draggedItemId).css({'z-index':'15'});
                    },
                    stop: function(){
                        var draggedItemId = $(this).attr('id');
                        $(this).css({'z-index': '0'});
                        $(".class"+draggedItemId).css({'z-index':'10'});
                    }
                });
            });
        }
        var fooCount = $('.foo').length;
        //Generating new table after drop
        $('#mainDiv').droppable({
            drop: function(event, ui) {
                //Getting position where new item was dropped
                var pos = ui.draggable.offset(), dPos = $(this).offset();
                var droppedTop = ui.position.top - $(this).offset().top;
                var droppedLeft = ui.position.left - $(this).offset().left;
                //Generating new table if the item is dropped first time
                if (!ui.draggable.hasClass('foo')) {
                    var Class = ui.draggable.attr("class");
                    var title = ui.draggable.text().trim();
                    var item = $('<table class="foo small elementTable ' + Class + '" name="' + title + '" id="'+(fooCount+1)+'" style="left: '+droppedLeft+'px; top: '+droppedTop+'px;"><tr class="tableHeader"><th class="thClass"><span class="header">' + title + '</span><span class="settings"><img src="Icons/pignon.png" width="17px" height="17px" alt="Settings" title="Settings" /></span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>');
                    $(this).append(item);
                    fooCount += 1;
                    foo();
                }
            }
        });