Я пытаюсь создать какую-то головоломку.
У меня есть красный этот учебник: 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>
спасибо и извините за мой плохой английский