Javascript 如何使用拖放克隆创建幻灯片放映

我想创建一个页面，用户可以选择将在幻灯片中显示的图像。我正在尝试使用mootools拖放，并希望使用lightgallery.js

如何将丢弃的图像数组传递到dynamicEL中？ 是否有方法使用#cart.item的id/类加载图像

非常感谢您的帮助。并为自己不熟悉编码而提前道歉

这是一个代码笔，似乎只是稍微工作

$（函数（）{
jQuery（'#dynamic'）。在（'click'，function（）上{
var selected_image=[]；
jQuery（“#cart.item img”）.each（函数（）{
变量项1={
src:$（this）.find（'img'）.attr（'src'），
thumb:$（this）.find（'img'）.attr（'data-thumb'），
subHtml:'
};
所选图像推送（项目1）；
});
jQuery（this.lightGallery）({
动态：是的，
dynamicEl：选定的图像
})
});
});
var-drop=$（'cart'）；
var dropFx=drop.effect（'background-color'，{wait:false}）；//需要等待，以便切换效果，
$$（'.item'）。每个（函数（项）{
添加项（'mousedown'，函数（e）{
e=新事件（e）.stop（）；
var clone=this.clone（）
.setStyles（this.getCoordinates（））//返回一个左/上/下/右的对象，因此它是完美的
.setStyles（{'opacity'：0.7，'position'：'absolute'}）
.addEvent（'emptydrop'，function（）{
这个。删除（）；
drop.removeEvents（）；
}).inject（document.body）；
下降，下降({
“drop”：函数（）{
drop.removeEvents（）；
clone.remove（）；
item.clone（）.inject（drop）；
dropFx.start（'7389AE'）.chain（dropFx.start.pass（'ffffff'，dropFx））；
},
“结束”：函数（）{
dropFx.start（'98B5C1'）；
},
“leave”：函数（）{
dropFx.start（'ffffff'）；
}
});
var drag=clone.makeDraggable({
droppables:[下降]
})；//这将返回被拖动的元素
drag.start（e）；//启动事件手册
});
});

您可以通过两种方式启动灯箱

删除项目时，您可以填充

dynamicEl

的数组，或

当“动态”按钮单击“创建元素数组”时

此处实施了备选方案2： 此实现背后的逻辑与您复制到删除区域的html一致

---

请让我知道任何解释。

是的！这太棒了！

$(function() {


  jQuery('#dynamic').on('click', function() {
  var selected_image = [];
  jQuery( "#cart.item img" ).each(function() {
  var item1 = {
    src: $(this).find('img').attr('src'),
    thumb: $(this).find('img').attr('data-thumb'),
    subHtml: '<h4></h4>'
  };
   selected_image.push(item1);
});


jQuery(this).lightGallery({
  dynamic: true,
  dynamicEl: selected_image
})
});

 });


var drop = $('cart');
var dropFx = drop.effect('background-color', {wait: false}); // wait is     needed so that to toggle the effect,

$$('.item').each(function(item){

item.addEvent('mousedown', function(e) {
    e = new Event(e).stop();

    var clone = this.clone()
        .setStyles(this.getCoordinates()) // this returns an object with     left/top/bottom/right, so its perfect
        .setStyles({'opacity': 0.7, 'position': 'absolute'})
        .addEvent('emptydrop', function() {
            this.remove();
            drop.removeEvents();
        }).inject(document.body);

    drop.addEvents({
        'drop': function() {
            drop.removeEvents();
            clone.remove();
            item.clone().inject(drop);
            dropFx.start('7389AE').chain(dropFx.start.pass('ffffff', dropFx));
        },
        'over': function() {
            dropFx.start('98B5C1');
        },
        'leave': function() {
            dropFx.start('ffffff');
        }
    });

    var drag = clone.makeDraggable({
        droppables: [drop]
    }); // this returns the dragged element

    drag.start(e); // start the event manual
});

});