关于H5拖拽事件

鼠标拖拽事件在项目中时很常见的,如果用原生js去实现会很复杂,好在H5自带拖拽API。如图:


之前只是实现了点击进度条移动到鼠标点击的地方,话不多说上代码,html代码如下:

<div class="repair-slider">
	<div class="repair-slider-segment" style="margin-left: 3px;"><span class="repair-slider-num" style="left:-3px;" repair-sliderNum="0">0</span></div>
	<div class="repair-slider-segment"></div>
	<div class="repair-slider-segment"><span class="repair-slider-num" repair-sliderNum="0.25">1/4</span></div>
	<div class="repair-slider-segment"></div>
	<div class="repair-slider-segment"><span class="repair-slider-num" repair-sliderNum="0.5">1/2</span></div>
	<div class="repair-slider-segment"></div>
	<div class="repair-slider-segment"><span class="repair-slider-num" repair-sliderNum="0.75">3/4</span></div>
	<div class="repair-slider-segment"></div>
	<div class="repair-slider-segment" style="margin: 5px 0 0 -5px;"><span class="repair-slider-num" repair-sliderNum="1">Max</span></div>
	<div class="repair-slider-range" style="width: 0%;"></div>
	<div class="repair-slider-range-hide"></div>
	<a class="repair-slider-handle state-default corner-all" style="left: 0%;" draggable="true"></a>
</div>
css代码如下:

		.repair-slider {
			margin-top: 20px;
			position: relative;
			background: #e8edf2;
			border-radius: 32px;
			height: 12px;
		}
		
		.repair-slider-handle {
			width: 0;
			height: 0;
			border: 8px solid transparent;
			border-top-color: #FF7604;
			cursor: pointer;
			position: absolute;
			top: -10px;
			z-index: 2;
			margin-left: -9px;
		}
		
		.repair-slider-range,
		.repair-slider-range-hide {
			background-color: #FF7604;
			border-radius: 30px;
			display: block;
			height: 100%;
			position: absolute;
			z-index: 1;
		}
		
		.repair-slider-range-hide {
			width: 100%;
			background-color: transparent;
		}
		
		.repair-slider-segment {
			position: relative;
			z-index: 100;
			background-color: #fff;
			float: left;
			height: 6px;
			margin: 5px 12.3% 0 -1px;
			width: 1px;
		}
		
		.repair-slider-num {
			position: absolute;
			top: 10px;
			left: -10px;
			font-size: 10px;
		}
js代码如下:

//点击进度跳转
$(".repair-slider-range-hide").bind("click", function() {
	var e = window.event || arguments[0];
	var x = e.clientX - $(".repair-slider-range-hide").offset().left;
	if(x >= $(".repair-slider").width()) {
	$(".repair-slider-range").css("width", $(".repair-slider").width());
	$(".repair-slider-handle").css("left", $(".repair-slider").width());
     } else {
	$(".repair-slider-range").css("width", parseInt(x) * 100 / parseInt($(".repair-slider").width()) + "%");
	$(".repair-slider-handle").css("left", parseInt(x) * 100 / parseInt($(".repair-slider").width()) + "%");
    }
      var vrange = $(".repair-slider-range", controller.editPage.vEditArea).width() / $(".repair-slider").width();
	$("input[name='Oil_e']", controller.editPage.vEditArea).val(vrange); //油耗
});
//点击刻度跳到相应进度
	$(".repair-slider-num").bind("click", function() {
	$(".repair-slider-range").css("width", parseFloat($(this).attr("repair-sliderNum")) * 100 + "%");
	$(".repair-slider-handle").css("left", parseFloat($(this).attr("repair-sliderNum")) * 100 + "%");
});
后来需要实现拖动小箭头进度条也一起移动,H5自带拖拽事件,dragstart,drag,dragend,这3个都是对于源元素而言的也就是要拖拽的元素,另外还有dragover,drop是对于目标元素而言的,也就是想把要拖拽的元素最终放在哪里。对于这个拖动小箭头用到dragstart,drag,dragend即可。

js代码如下:

//预检信息 油耗  拖拽
// 1. 获取源元素
var handle = $(".repair-slider-handle");
// 2. 为源元素绑定dragstart事件
handle.bind("dragstart", MyDragStart);
handle.bind("drag", MyDrag);
handle.bind("dragend", MyDragEnd);
// 3. 实现事件的处理函数
function MyDragStart(event) {
	var e = window.event || arguments[0];
	var x = e.clientX - $(".repair-slider-range-hide").offset().left;
	if(x < 0) {
		x = 0
	} else if(x > $(".repair-slider").width()) {
		x = $(".repair-slider").width()
	}
	$(".repair-slider-range").css("width", parseInt(x) * 100 / parseInt($(".repair-slider").width()) + "%");
	$(".repair-slider-handle").css("left", parseInt(x) * 100 / parseInt($(".repair-slider").width()) + "%");
}

function MyDrag(event) {
	event.preventDefault();
	var e = window.event || arguments[0];
	var x = e.clientX - $(".repair-slider-range-hide").offset().left;
	if(x < 0) {
		x = 0
	} else if(x > $(".repair-slider").width()) {
		x = $(".repair-slider").width()
	}
		$(".repair-slider-range").css("width", parseInt(x) * 100 / parseInt($(".repair-slider").width()) + "%");
		$(".repair-slider-handle").css("left", parseInt(x) * 100 / parseInt($(".repair-slider").width()) + "%");
}
function MyDragEnd(event) {
	event.preventDefault();
	var e = window.event || arguments[0];
	var x = e.clientX - $(".repair-slider-range-hide").offset().left;
	if(x < 0) {
		x = 0
	} else if(x > $(".repair-slider").width()) {
		x = $(".repair-slider").width()
	}
		$(".repair-slider-range").css("width", parseInt(x) * 100 / parseInt($(".repair-slider").width()) + "%");
		$(".repair-slider-handle").css("left", parseInt(x) * 100 / parseInt($(".repair-slider").width()) + "%");

}
        之前js写好之后,发现拖动元素的时候总是会先选取到下方刻度的数字,然后出发浏览器默认的选中文字后复制搜索等功能,很难选择到要拖拽的元素,不过只要触发了拖拽事件后就可以一直拖动,然后点击页面其他部分再选择元素又是像之前一样难选择到,使用了event.preventDefault()还是不行,如果在dragstart里面使用event.preventDefault()又会导致拖拽事件不触发,后来百度发现时要在拖拽的元素里面添加draggable="true"属性才能触发元素的拖拽事件,加上这个属性之后问题都解决了。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

关于H5拖拽事件

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭