drag-validation.js
$(function() {
var drag = $this("drag");
var dvi = $this("drag-validation-img");
var dvl = $this("drag-validation-lock");
var dvc = $this("drag-validation-canvas");
var dvctx = dvc.getContext("2d");
var dp = $this("drag-progress");
var dpb = $this("drag-progress-bar");
var dragImgData;
var offset = 0;
var unlock = false;
var dragMarginLeft;
var dmlAndDPPOl;
calculateDragLeftVal();
function mobileRectangular(e) {
if (unlock) {
eventBindings();
} else {
offset = e.clientX - dmlAndDPPOl;
console.log("偏移量:" + offset);
if (offset <= 20) {
offset = dragMarginLeft / 2;
} else if (offset >= 190) {
offset = dragMarginLeft * 4 - 10;
} else {
offset = e.clientX - dmlAndDPPOl;
}
console.log("offset:" + offset + " dml:" + dmlAndDPPOl);
drag.style.marginLeft = offset + "px";
dpb.style.width = offset - 30 + "%";
redraw(offset);
}
}
function redraw(x) {
dvctx.clearRect(0, 0, 263, 170);
dvctx.drawImage(dvi, 0, 0, 263, 170);
dragImgData = dvctx.getImageData(130, 20, 60, 60);
dvctx.clearRect(130, 20, 60, 60);
dvctx.putImageData(dragImgData, x, 20, 0, 0, 263, 170);
}
function calculateDragLeftVal() {
dragMarginLeft = document.defaultView.getComputedStyle(drag, null)['marginLeft']
.replace("px", "");
dmlAndDPPOl = (dragMarginLeft / 2)
+ dp.parentNode.parentNode.offsetLeft + 10;
}
window.onresize = function() {
calculateDragLeftVal();
};
drag.addEventListener("mousedown", function(e) {
drag.addEventListener("mousemove", mobileRectangular, false);
}, false);
drag.addEventListener("mouseup", function(e) {
eventBindings();
if (130 <= offset) {
console.log("good!");
dvl.src = "custom/imgs/plugin/drag-validation/unlock.png";
dvi.style.display = "none";
dvc.style.display = "none";
unlock = true;
} else if (20 >= offset) {
}
}, false);
function eventBindings() {
if (drag.removeEventListener) {
drag.removeEventListener("mousemove", mobileRectangular, false);
} else if (drag.detachEvent) {
drag.detachEvent("onmousemove", mobileRectangular, false);
}
}
drag.addEventListener("mouseover", function(e) {
if (unlock) {
eventBindings();
} else {
dvi.style.display = "none";
dvc.style.display = "block";
dvctx.drawImage(dvi, 0, 0, 263, 170);
dragImgData = dvctx.getImageData(130, 20, 60, 60);
dvctx.putImageData(dragImgData, 50, 20, 0, 0, 263, 170);
dvctx.clearRect(130, 20, 60, 60);
}
}, false);
drag.addEventListener("mouseout", function(e) {
dvi.style.display = "none";
dvc.style.display = "none";
}, false);
function $this(obj) {
return document.getElementById(obj);
}
});
drag-validation.jsp
<div class="row">
<div class="col-sm-3">
<div style="margin-left: -15px;">
<img
src="custom/imgs/plugin/drag-validation/drag-validation-img1.jpg"
id="drag-validation-img" width="263" height="170"
style="display: none; position: absolute; margin-top: -170px; margin-left: 15px;" />
<canvas id="drag-validation-canvas" width="263" height="170"
style="display: none; position: absolute; margin-top: -170px; margin-left: 15px;">
</canvas>
</div>
<div id="drag-progress" class="progress">
<div id="drag-progress-bar"
class="progress-bar progress-bar-striped active" role="progressbar"
aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">45% Complete</span>
</div>
<div id="drag"></div>
</div>
</div>
<div class="col-sm-3">
<img id="drag-validation-lock"
src="custom/imgs/plugin/drag-validation/lock.png" width="30px"
height="30px" style="margin-top: -10px; margin-left: -10px" />
</div>
</div>