2016-11-10 9 views
1

スライドショーに表示される画像をユーザーが選択できるページを作成します。 mootoolsのドラッグ&ドロップを使用しようとしており、lightgallery.jsを使用したいと考えています。ドラッグドロップクローンでスライドショーを作成する方法

ドロップされたイメージの配列をdynamicELに渡すにはどうすればよいですか? #cart.itemのid/classを使用して画像を読み込む方法はありますか?

ご協力いただきまして誠にありがとうございます。そして、コーディングで新しいことについて事前にお詫び申し上げます。ここで

はわずかに次の2つの方法で光ボックスを起動することができます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 
}); 

}); 

答えて

1

を動作しているようだcodepenです。アイテムをドロップしたときに、動的ボタンが要素の配列を作成クリックしたときにdynamicEl、または

  • のための配列を移入することができます

    1. 。ここで

    オプション2実装: http://codepen.io/imranweb7/pen/zorRLG?editors=1111 あなたがドロップされた領域にコピーHTMLとしてあたり、この実装の背後にあるロジック。

    説明があれば教えてください。

  • +0

    はい!これは素晴らしい! – mero

    関連する問題