html 5 counter on drop function_问答_开发者_运维开发者技术经验分享

i am trying to make some sort of puzzle. I have red this tutorial: http://www.html5rocks.com/tutorials/dnd/basics/ changed text div to picture and everything is working perfectly, until point, where i want to add counter on moves. With text, everything is working well, but if i have image, count number is overwriting my image i tried with

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

but it is not working

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

i will post whole html document i hope it is ok.

<!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>

thanks and sorry for my bad english

John,

I believe that the problem is that when you update the textContent of the count element, that it is overwriting the tag code inside the . Try assigning the image to the background-image CSS property of the instead. For example, replace the in your sample HTML code with this:

  <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>

If your images are larger than 50x50 pixels, just reset the width and height CSS properties on the with the "column" class.