0

我有一个容器，其中包含一个主图像和每个 2-3 个缩略图。我希望用户能够通过单击其父级的缩略图来更改图像。除此之外，我希望容器是可拖动/可排序的，以便用户能够轻松地比较它们。

这就是为什么我在我的 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);

})();

这两个功能有效，但是当我拖动容器并更改其位置时，第一个功能不再有效。

4

1 回答 1

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);
  });
});
于 2016-02-05T04:08:21.647 回答