programer-ir
شنبه 30 اردیبهشت 1391, 11:43 صبح
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#draggable1,#draggable2,#draggable3
{
width: 75px;
height: 70px;
float: left;
padding: 5px;
margin: 5px;
}
#target1,#target2,#target3
{
width: 250px;
height: 250px;
float: right;
padding: 5px;
margin: 5px;
}
#target1{ background-color: red;}
#target2{background-color: blue;}
#target3{background-color: green;}
#draggable1{background-color:#add8e6;}
#draggable2{background-color: teal;}
#draggable3{background-color: #8b008b;}
</style>
<script type="text/javascript">
function start(e)
{
e.dataTransfer.effectAllowed="move";
e.dataTransfer.setData("Date", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target,0,0);
return true;
}
function enter(e)
{
return true;
}
function over(e)
{
return true;
}
function drop(e)
{
var iddraggable= e.DataTransfer.getData("Data");
e.target.appendChild(document.getElementById(iddra ggable));
e.stopPropagation();
return false;
}
function end(e)
{
e.DataTransfer.clearData("Date");
return true;
}
</script>
</head>
<body>
<div id="draggable1" draggable="true" ondragstart="return start(event)" ondragend="return end(event)" >1</div>
<div id="draggable2" draggable="true" ondragstart="return start(event)" ondragend="return end(event)" >2</div>
<div id="draggable3" draggable="true" ondragstart="return start(event)" ondragend="return end(event)" >3</div>
<div id="target1" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)" >
</div>
<div id="target2" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)" ></div>
<div id="target3" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)" ></div>
</body>
</html>
درگش کار می کنه ولی دراپ نمیشه توی کادر های تعیین شده
<html>
<head>
<title></title>
<style type="text/css">
#draggable1,#draggable2,#draggable3
{
width: 75px;
height: 70px;
float: left;
padding: 5px;
margin: 5px;
}
#target1,#target2,#target3
{
width: 250px;
height: 250px;
float: right;
padding: 5px;
margin: 5px;
}
#target1{ background-color: red;}
#target2{background-color: blue;}
#target3{background-color: green;}
#draggable1{background-color:#add8e6;}
#draggable2{background-color: teal;}
#draggable3{background-color: #8b008b;}
</style>
<script type="text/javascript">
function start(e)
{
e.dataTransfer.effectAllowed="move";
e.dataTransfer.setData("Date", e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target,0,0);
return true;
}
function enter(e)
{
return true;
}
function over(e)
{
return true;
}
function drop(e)
{
var iddraggable= e.DataTransfer.getData("Data");
e.target.appendChild(document.getElementById(iddra ggable));
e.stopPropagation();
return false;
}
function end(e)
{
e.DataTransfer.clearData("Date");
return true;
}
</script>
</head>
<body>
<div id="draggable1" draggable="true" ondragstart="return start(event)" ondragend="return end(event)" >1</div>
<div id="draggable2" draggable="true" ondragstart="return start(event)" ondragend="return end(event)" >2</div>
<div id="draggable3" draggable="true" ondragstart="return start(event)" ondragend="return end(event)" >3</div>
<div id="target1" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)" >
</div>
<div id="target2" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)" ></div>
<div id="target3" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)" ></div>
</body>
</html>
درگش کار می کنه ولی دراپ نمیشه توی کادر های تعیین شده