您的位置：首页 > Web前端 > HTML5

html5拖拽

2015-11-23 17:17 603 查看

#one{width:300px;height:200px;border: 2px solid red;margin: 20px;}

#two{width:100px; height:50px;border: 1px solid blue;}

<div id="one"></div>

<div id="two" draggable="true">请拖拽我</div>

$(function(){

var html = "移动";

var two = document.getElementById("two");

var one = document.getElementById("one");

$("#sub").click(function(){

alert($("#yanse").val())

})

----------------------拖拽物体时间------------------------------------

two.ondragstart=function(){//拖拽开始时执行

$("#one").html("开始");

}

two.ondrag=function(){//拖拽过程中执行

html+="移动";

$("#one").html(html);

}

two.ondragend=function(){//拖拽结束时执行

html+="完成";

$("#one").html(html);

}

----------------------------投放区事件------------------------------------

one.ondragenter=function(e){//投放区进入时触发

e.preventDefault();//阻止浏览器默认行为

}

one.ondragover=function(e){//投放区移动时触发

e.preventDefault();//阻止浏览器默认行为

}

one.ondragleave=function(e){//投放区离开时触发

e.preventDefault();//阻止浏览器默认行为

}

one.ondrop=function(e){//放入投放区时时触发

e.preventDefault();//阻止浏览器默认行为

one.appendChild(two);

}

two.ondragstart=function(e){

//拖拽时带入的数据

e.dataTransfer.setData("data","123");

$("#one").html("开始");

}

one.ondrop=function(e){//放入投放区时时触发

e.preventDefault();//阻止浏览器默认行为

one.appendChild(two);

var val = e.dataTransfer.getData("data")//接受拖进来的数据

$("#one").append();

}

<style>

#box{

width:200px;height:200px;border:1px solid red;

}

#con{

width:200px;height:200px;border:1px solid blue;list-style:none;padding:0;margin:0;

}

li{

width:150px;height:30px;margin:5px 0;background:#ccc;line-height:30px;text-align:center;

list-style:none;

}

</style>

<script>

window.onload=function () {

var box=document.getElementById("box");

var con=document.getElementById("con");

var lis=document.getElementsByTagName("li");

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

lis[i].draggable=true;

lis[i].flag=false;

lis[i].ondragstart=function () {

this.flag=true;

}

lis[i].ondragend=function () {

this.flag=false;

}

}

box.ondragenter=function (e) {

e.preventDefault();

}

box.ondragover=function (e) {

e.preventDefault();

}

box.ondragleave=function (e) {

e.preventDefault();

}

box.ondrop=function (e) {

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

if(lis[i].flag){

box.appendChild(lis[i]);

}

}

e.preventDefault();

}

con.ondragenter=function (e) {

e.preventDefault();

}

con.ondragover=function (e) {

e.preventDefault();

}

con.ondragleave=function (e) {

e.preventDefault();

}

con.ondrop=function (e) {

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

if(lis[i].flag){

con.appendChild(lis[i]);

}

}

e.preventDefault();

}

}

</script>

</head>

<body>

<div id="box">

</div>

<ul id="con">

<li>后盾网php</li>

<li>后盾网js</li>

<li>后盾网html5</li>

<li>后盾网css3</li>

</ul>

</body>

</html>

})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航