2 самозапускающиеся функции javascript, выполняющиеся

Question

У меня есть контейнер, который содержит основное изображение и 2-3 миниатюры каждый. Я хотел, чтобы пользователь мог изменить изображение, нажав на миниатюру своего родителя. Помимо этого, я хочу, чтобы контейнеры были перетаскиваемыми/сортируемыми, чтобы пользователи могли легко сравнивать их.

Вот почему я сделал эти 2 самозапускающиеся функции в своем файле javascript.

Это изменение основного изображения в изображении миниатюры.

$(document).ready(function(){ 
    $('.thumb-img').on('click', function(){ 
    var url = $(this).attr('src'); 
    $(this).closest('.item-container').find('.primary-img').attr('src', url); 
    }); 
}); 

В то время как этот используется для перетаскивания контейнеров для обмена положением.

(function() { 
    "use strict"; 
    var dragAndDropModule = function(draggableElements){ 

    var elemYoureDragging = null 
     , dataString  = 'text/html'  
     , elementDragged = null 
     , draggableElementArray = Array.prototype.slice.call(draggableElements) //Turn NodeList into array 
     , dragonDrop = {}; //Put all our methods in a lovely object 

     // Change the dataString type since IE doesn't support setData and getData correctly. 
     dragonDrop.changeDataStringForIe = (function() { 
      var userAgent = window.navigator.userAgent, 
       msie = userAgent.indexOf('MSIE '),  //Detect IE 
       trident = userAgent.indexOf('Trident/'); //Detect IE 11 

      if (msie > 0 || trident > 0) { 
       dataString = 'Text'; 
       return true; 
      } else { 
       return false; 
      } 
     })(); 


     dragonDrop.bindDragAndDropAbilities = function(elem) { 
      elem.setAttribute('draggable', 'true'); 
      elem.addEventListener('dragstart', dragonDrop.handleDragStartMove, false); 
      elem.addEventListener('dragenter', dragonDrop.handleDragEnter, false); 
      elem.addEventListener('dragover', dragonDrop.handleDragOver, false); 
      elem.addEventListener('dragleave', dragonDrop.handleDragLeave, false); 
      elem.addEventListener('drop',  dragonDrop.handleDrop, false); 
      elem.addEventListener('dragend', dragonDrop.handleDragEnd, false); 
     }; 

     dragonDrop.handleDragStartMove = function(e) { 
      var dragImg = document.createElement("img"); 
      dragImg.src = "http://alexhays.com/i/long%20umbrella%20goerge%20bush.jpeg"; 

      elementDragged = this; 

      e.dataTransfer.effectAllowed = 'move'; 
      e.dataTransfer.setData(dataString, this.innerHTML); 
      //e.dataTransfer.setDragImage(dragImg, 20, 50); //idk about a drag image 
     }; 

     dragonDrop.handleDragEnter = function(e) { 
      if(elementDragged !== this) { 
      this.style.border = "2px dashed #3a3a3a"; 
      } 
     }; 

     dragonDrop.handleDragOver = function(e) { 
      e.preventDefault(); 
      e.dataTransfer.dropEffect = 'move';  
     }; 

     dragonDrop.handleDragLeave = function(e) { 
      this.style.border = "2px solid transparent"; 
     }; 

     dragonDrop.handleDrop = function(e) { 
     if(elementDragged !== this) { 
      var data = e.dataTransfer.getData(dataString); 
      elementDragged.innerHTML = this.innerHTML; 
      this.innerHTML = e.dataTransfer.getData(dataString); 
      } 
      this.style.border = "2px solid transparent"; 
      e.stopPropagation(); 
      return false; 
     }; 

     dragonDrop.handleDragEnd = function(e) { 
      this.style.border = "2px solid transparent"; 
     }; 

     // Actiavte Drag and Dropping on whatever element 
     draggableElementArray.forEach(dragonDrop.bindDragAndDropAbilities); 
    }; 

    var allDraggableElements = document.querySelectorAll('.draggable-droppable'); 
    dragAndDropModule(allDraggableElements); 

})(); 

Две функции работают, но когда я перетаскиваю контейнер и меняю его положение, первая функция больше не работает.

Answer 1

Возможно, это связано с тем, что вы перетаскиваете его и воссоздаете узел элемента.

Вы можете использовать Event для решения проблемы.

$(document).ready(function(){ 
    // It delegate thumb-img event to body, so whatever you recreate thumb-img,is all right 
    $('body').on('click', '.thumb-img', function(){ 
    var url = $(this).attr('src'); 
    $(this).closest('.item-container').find('.primary-img').attr('src', url); 
    }); 
});