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.
加载中,请稍侯......
精彩评论