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

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

如何将一张丢弃的图像传递给动态EL？有没有办法使用＃cart.item的id/class加载图像？

任何帮助，非常感谢。并且在编码方面提前致歉。

这里是一个codepen只似乎是稍稍工作http://codepen.io/ssab/pen/QGyKVO

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

});

来源

2016-11-10 mero

您可以通过两种方式推出灯箱。

下降时，项目就可以填充阵列为dynamicEl，或
当动态按钮点击创建元素的数组。

这里选择2实现： http://codepen.io/imranweb7/pen/zorRLG?editors=1111 本实施背后的逻辑，每个作为HTML复制到放置的区域。

请让我知道任何解释。

来源

2016-11-11 06:04:30

是的！这很棒！ – mero

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

回答

相关问题