Question

我已完成拖放按钮和导航栏，并且在放下并正常工作后仍可拖动，

但现在问题是我想拖放图片。我尝试了很多不同的东西，但无法做到这一点。

I am adding my fiddle please check

http://jsfiddle.net/Yousuf_007/d6gowym5/

感谢名单

Answer 1

我现在正在开发一个类似于你的项目，但在左边的div中我有一个列表，每个可拖动的元素都是一个列表项。这个功能对我来说很完美，也许对你有用：

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

尝试重写您的功能并给它类似的外观。还可以将DOM结构从单独的元素更改为列表，这将有助于您轻松实现拖放。这是小提琴：https://jsfiddle.net/vaxobasilidze/7gvon7h1/

编辑：这是你的小提琴。我已经初始化了拖放。其余的，造型以及您在放弃时对内容所做的工作取决于您：http://jsfiddle.net/vaxobasilidze/rhz6ovyz/

使用jqueryui将图像拖放到画布上

1 个答案: