Question

我的名字是Adam和我是一名初级程序员。我开始理解Jquery UI是如何工作的，但我需要一些帮助。我想拖一个小的＆＃34;图像＆＃34;在空白的画布上（空白＆＃34; div＆＃34;），当我放下它时，我想要＆＃34;图像＆＃34;变成一个＆＃34; div＆＃34;内部有特定元素。

它基本上是一种拖放，可以改变掉落的＆＃34;图像＆＃34;进入＆＃34; div＆＃34;。

我愿意接受有关如何实现这一目标的任何建议。谢谢。

Answer 1

请看看这个jsfiddle：http://jsfiddle.net/5qyf6/5/

http://jqueryui.com/draggable/

var replaceImgWithContent = function ($el) {
    $el.wrap($('<div></div>', {
        'html': '<b>New content</b>',
        'css': {
            'width': $el.outerWidth() + 'px',
            'height': $el.outerHeight() + 'px',
            'position': 'absolute',
            'left': $el.offset().left + 'px',
            'top': $el.offset().top + 'px'
        }
    }));
    $el.remove();
}
$('img').draggable({
    create: function () {
        $('img').on('dragstop', function (e, ui) {
            div_offset = $('div').offset();
            img_offset = $('img').offset();
            alert('stopped');
            if (img_offset.top > div_offset.top && img_offset.top < div_offset.top + $('div').outerHeight() && img_offset.left > div_offset.left && img_offset.left < div_offset.left + $('div').outerWidth()) {
                replaceImgWithContent($('img'));
            }
        });
    }
});

另一种解决方案当然是立即开始使用div包装的图像。所以你可以将draggable（）应用于那个包装div，你不需要重新启动＆＃34;它适用于您使用的每个图像实例。

删除时如何将可拖动图像转换为div

1 个答案: