随笔 - 66, 文章 - 0, 评论 - 0, 阅读 - 28882

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul,
        li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        ul {
            width: 100px;
            height: 100px;
            border: 2px solid #222;
        }
        
        li {
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background-color: orange;
            border-bottom: 1px solid blue;
            cursor: pointer;
        }
        
        #box {
            width: 400px;
            height: 120px;
            border: 2px solid #222;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li class="one">白日依山尽</li>
        <li class="two">黄河入海流</li>
        <li class="three">欲穷千里目</li>
        <li class="four">更上一层楼</li>
    </ul>
    <div id="box"></div>
</body>
<script>
    var list = document.getElementById('list');
    var lis = list.children;
    var box = document.getElementById('box');
    for (var i = 0; i < lis.length; i++) {
        lis[i].setAttribute('draggable', 'true');
        lis[i].ondragstart = function(e) {
            var e = e || window.event;
            // var lis_class = this.getAttribute('class');
            e.dataTransfer.setData('Text', this.className)
        }
    }
    box.ondragover = function(e) {
        var e = e || window.event;
        e.preventDefault();
    }
    box.ondrop = function(e) {
        var e = e || window.event;
        var data = e.dataTransfer.getData('Text');
        var ele = document.getElementsByClassName(data)[0];
        box.appendChild(ele);
    }
</script>
</html>

posted on 2020-03-19 12:45 蒸汽小工人阅读(275) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

2025年3月

日

一

二

三

四

五

六

昵称：蒸汽小工人
园龄： 5年6个月
粉丝： 7
关注： 7

+加关注

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	ul,
	li {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	ul {
	width: 100px;
	height: 100px;
	border: 2px solid #222;
	}

	li {
	width: 100%;
	height: 20px;
	line-height: 20px;
	text-align: center;
	background-color: orange;
	border-bottom: 1px solid blue;
	cursor: pointer;
	}

	#box {
	width: 400px;
	height: 120px;
	border: 2px solid #222;
	}
	</style>
	</head>
	<body>
	<ul id="list">
	<li class="one">白日依山尽</li>
	<li class="two">黄河入海流</li>
	<li class="three">欲穷千里目</li>
	<li class="four">更上一层楼</li>
	</ul>
	<div id="box"></div>
	</body>
	<script>
	var list = document.getElementById('list');
	var lis = list.children;
	var box = document.getElementById('box');
	for (var i = 0; i < lis.length; i++) {
	lis[i].setAttribute('draggable', 'true');
	lis[i].ondragstart = function(e) {
	var e = e \|\| window.event;
	// var lis_class = this.getAttribute('class');
	e.dataTransfer.setData('Text', this.className)
	}
	}
	box.ondragover = function(e) {
	var e = e \|\| window.event;
	e.preventDefault();
	}
	box.ondrop = function(e) {
	var e = e \|\| window.event;
	var data = e.dataTransfer.getData('Text');
	var ele = document.getElementsByClassName(data)[0];
	box.appendChild(ele);
	}
	</script>
	</html>