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