js html5 拖拽问题

2016-04-20 10:16:23 232 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

解决selenium Action模拟拖拽无效最近做UI自动化时，需要将页面上一个元素拖拽到另外一个元素的位置，最开始写框架时，使用的Action鼠标模拟事件dragAndDrop实现，通过简单的测试没问题。但用到项目中后发现，这种方法根本就拖不过去，试了很多办法都不行，最后发现原来Selenium 的Action有不支持HTML5的拖拽的问题。既然Selenium自带的方法行不通，就只能通过其他方法了，那最先想到... 阅读详情

<head>

<title>tz</title>

<style type="text/css">

<!--

div{

margin:10px;

width:100px; height:auto;

border:1px solid #0033CC;

}

-->

</style>

</head>

<body>

<div id="tool" class="dragbox">

	<div class="draglist" title="拖拽我" draggable="true">列表1</div>

    <div class="draglist" title="拖拽我" draggable="true">列表2</div>

    <div class="draglist" title="拖拽我" draggable="true">列表3</div>

    <div class="draglist" title="拖拽我" draggable="true">列表4</div>

    <div class="draglist" title="拖拽我" draggable="true">列表5</div>

</div>

<div id="main" class="dustbin">

<div>a</div>

<div>b<div>b1</div></div>

</div>

<script>

//JS代码

</script>

</body>

</html>



var obj =document.getElementById("tool"),eleDrag = null;

var eleDrags=obj.getElementsByTagName("div");

//拖动元素文字不可被选中

for (var i=0; i<eleDrags.length; i+=1) {

    eleDrags[i].onselectstart = function(ev) {

        return false;

    };

//拖动元素	

    eleDrags[i].ondragstart = function(ev) {

        /*拖拽开始*/

        //拖拽效果

        ev.dataTransfer.effectAllowed = "move";

        ev.dataTransfer.setData("text", ev.target.innerHTML);

        ev.dataTransfer.setDragImage(ev.target, 0, 0);

        eleDrag = ev.target;

        return true;

    };

    eleDrags[i].ondragend = function(ev) {

        /*拖拽结束*/

        ev.dataTransfer.clearData("text");

        eleDrag = null;

        return false

    };

}





//绑定事件

window.onload = function myfunction() {

//stopEventBubble(event);

var obj=document.getElementById("main");

var inputs =obj.getElementsByTagName("div");

            for (var i = 0; i < inputs.length; i++){

				inputs[i].index=i;

                inputs[i].ondragover = function(ev) {

					/*拖拽元素在目标元素头上移动的时候*/

					this.style.color = "#cccccc";

					ev.preventDefault();

					return true;

				};

				

				//inputs[i].ondragenter = function(ev) {

				//i++;

					/*拖拽元素进入目标元素头上的时候(重复执行)*/

					//this.style.color = "#ff00ff";

					//this.innerHTML+=i;

					//return true;

				//};

				inputs[i].ondrop = function(ev) {

					/*拖拽元素进入目标元素头上，同时鼠标松开的时候*/

					this.innerHTML += '<strong>被放在这了</strong>';

					this.style.color = "#ff0000";

					return false;

				};

				

				inputs[i].ondragleave = function(ev){

						this.style.color = "#000000";

				}

            }

}