Блог

Главная - Вопросы по программированию - счетчик html 5 при функции удаления

счетчик html 5 при функции удаления

#javascript #html #image

#javascript #HTML #изображение

Вопрос:

я пытаюсь собрать какую-то головоломку. Я покрасил этот урок:http://www.html5rocks.com/tutorials/dnd/basics изменил текст div на изображение, и все работает отлично, до того момента, когда я хочу добавить счетчик при перемещениях. С текстом все работает хорошо, но если у меня есть изображение, количество счетчиков перезаписывает мое изображение, с которым я пытался 

 document.getElementById("some-new-div").innerHTML = 'moves: '   newCount;

но это не работает

   this.handleDrop = function(e) {
    // this/e.target is current target element.

    if (e.stopPropagation) {
      e.stopPropagation(); // stops the browser from redirecting.
    }

    // Don't do anything if we're dropping on the same column we're dragging.
    if (dragSrcEl_ != this) {
      dragSrcEl_.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData('text/html');

      // Set number of times the column has been moved.          <-----------------------------------------------
      var count = this.querySelector('.count');
      var newCount = parseInt(count.getAttribute('data-col-moves'))   1;
      count.setAttribute('data-col-moves', newCount);
      count.textContent = 'moves: '   newCount;
      //document.getElementById("count1").innerHTML = 'moves: '   newCount;
    }

    return false;
  };

я опубликую весь HTML-документ, надеюсь, все в порядке.

 <!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styl.css">
  <title></title>
  </head>
  <body>
    <div id="columns-full">
          <table>
            <tr><td><div class="column"><div class="count" data-col-moves="0"><img src='img/img1.jpg' alt='img1.jpg' /></div></div></td><td><div class="column"><img src='img/img2.jpg' alt='img2.jpg' /></div></td><td><div class="column"><img src='img/img3.jpg' alt='img3.jpg' /></div></td><td><div class="column"><img src='img/img4.jpg' alt='img4.jpg' /></div></td></tr>

        </table>
    </div>
    <div class="count1" data-col-moves="0"></div>
  </body>
</html>

<script>


Element.prototype.hasClassName = function(name) {
  return new RegExp("(?:^|\s )"   name   "(?:\s |$)").test(this.className);
};
Element.prototype.addClassName = function(name) {
  if (!this.hasClassName(name)) {
    this.className = this.className ? [this.className, name].join(' ') : name;
  }
};
Element.prototype.removeClassName = function(name) {
  if (this.hasClassName(name)) {
    var c = this.className;
    this.className = c.replace(new RegExp("(?:^|\s )"   name   "(?:\s |$)", "g"), "");
  }
};
var samples = samples || {};
// Full example
(function() {
  var id_ = 'columns-full';
  var cols_ = document.querySelectorAll('#'   id_   ' .column');
  var dragSrcEl_ = null;
  this.handleDragStart = function(e) {
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
    dragSrcEl_ = this;
    // this/e.target is the source node.
    this.addClassName('moving');
  };
  this.handleDragOver = function(e) {
    if (e.preventDefault) {
      e.preventDefault(); // Allows us to drop.
    }

    e.dataTransfer.dropEffect = 'move';

    return false;
  };

  this.handleDragEnter = function(e) {
    this.addClassName('over');
  };

  this.handleDragLeave = function(e) {
    // this/e.target is previous target element.
    this.removeClassName('over');
  };

  this.handleDrop = function(e) {
    // this/e.target is current target element.

    if (e.stopPropagation) {
      e.stopPropagation(); // stops the browser from redirecting.
    }

    // Don't do anything if we're dropping on the same column we're dragging.
    if (dragSrcEl_ != this) {
      dragSrcEl_.innerHTML = this.innerHTML;
      this.innerHTML = e.dataTransfer.getData('text/html');

      // Set number of times the column has been moved.          <-----------------------------------------------
      var count = this.querySelector('.count');
      var newCount = parseInt(count.getAttribute('data-col-moves'))   1;
      count.setAttribute('data-col-moves', newCount);
      count.textContent = 'moves: '   newCount;
      //document.getElementById("count1").innerHTML = 'moves: '   newCount;
    }

    return false;
  };

  this.handleDragEnd = function(e) {
    // this/e.target is the source node.
    [].forEach.call(cols_, function (col) {
      col.removeClassName('over');
      col.removeClassName('moving');
    });
  };

  [].forEach.call(cols_, function (col) {
    col.setAttribute('draggable', 'true');  // Enable columns to be draggable.
    col.addEventListener('dragstart', this.handleDragStart, false);
    col.addEventListener('dragenter', this.handleDragEnter, false);
    col.addEventListener('dragover', this.handleDragOver, false);
    col.addEventListener('dragleave', this.handleDragLeave, false);
    col.addEventListener('drop', this.handleDrop, false);
    col.addEventListener('dragend', this.handleDragEnd, false);
  });
})();
</script>

спасибо и извините за мой плохой английский

Ответ №1:

Джон,

Я полагаю, что проблема заключается в том, что при обновлении textContent элемента count происходит перезапись кода тега внутри . Попробуйте присвоить изображение свойству background-image CSS вместо. Например, замените в вашем примере HTML-кода на это:

   <table>
<tr><td><div class="column"><div class="count" data-col-moves="0" style="background-image:url('img/img1.jpg');width:50px;height:50px;" alt='img1.jpg'></div></div></td>

<td><div class="column" style="background-image:url('img/img2.jpg');width:50px;height:50px;" alt='img2.jpg'></div></td>

<td><div class="column" style="background-image:url('img/img3.jpg');width:50px;height:50px;" alt='img3.jpg'></div></td>

<td><div class="column" style="background-image:url('img/img4.jpg');width:50px;height:50px;" alt='img4.jpg'></div></td></tr>

Если ваши изображения больше 50×50 пикселей, просто сбросьте CSS-свойства width и height в классе «column» с помощью класса «column».