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 >