js html5 拖拽问题

[qq_24461463]

<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";
				}
            }
}

拖到父元素是可以的，但拖到子元素时父元素添加了子元素没有添加！或者两个都添加了
怎么样才可以拖到那就在那添加!

[顾小林]

//绑定事件
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 false;
				};
				
				//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";
					//ev.preventDefault();
					ev.stopPropagation();
					return false;
				};
				
				inputs[i].ondragleave = function(ev){
						this.style.color = "#000000";
				}
            }
}

[qq_24461463]

shen332401890 怎么还是不行呀，是不是浏览器不行，我用的是360的

[qq_24461463]

阻止冒泡怎么样可以不

[qq_24461463]

ev.stopPropagation(); 这ev到底是什么？可以在载入后 obj.stopPropagation();吗

[顾小林]

引用 3 楼 qq_24461463 的回复:

shen332401890 怎么还是不行呀，是不是浏览器不行，我用的是360的

我用的chrome

[顾小林]

引用 5 楼 qq_24461463 的回复:

ev.stopPropagation(); 这ev到底是什么？可以在载入后 obj.stopPropagation();吗

ev是 window.event