关于H5拖拽事件

最新推荐文章于 2024-08-17 20:28:43 发布

原创最新推荐文章于 2024-08-17 20:28:43 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在H5中使用内置拖拽API来简化原本复杂的鼠标拖拽事件实现。通过实例展示了HTML和JavaScript代码，帮助理解如何通过H5 API创建点击进度条并跟随鼠标点击位置移动的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标拖拽事件在项目中时很常见的，如果用原生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"属性才能触发元素的拖拽事件，加上这个属性之后问题都解决了。