拖放控件
Drag and Drop Control
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
#div2
{float:left; width:200px; height:100px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
document.getElementById(data).width="200"
document.getElementById(data).height="100"
}
</script>
</head>
<body>
<form id="f1" name="form1" method="post">
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="smiley.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<input type="button" value="Clear" >
</form>
</body>
在此代码中,当我删除图像时,当我单击清除按钮时,我需要从div2 中删除图像。如何为此问题编写javascript代码。onclick函数来编码我必须编写.请帮助我
这很简单。使用以下代码-
<input type="button" value="Clear" onclick="document.getElementById('div2').innerHTML='';">
代替-
<input type="button" value="Clear">
为了进一步改进演示文稿,请使用以下代码-
<input type="button" value="Clear" onclick="if(document.getElementById('div2').innerHTML!='')document.getElementById('div1').innerHTML=document.getElementById('div2').innerHTML; document.getElementById('div2').innerHTML=''">
在这里给一个fiddle_solution
试试这个:链接
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
相关文章:
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 音频控件在mouseover上显示,在mouseout上淡出
- 如何使用 kendo ui 的控件和框架使每个列表项可拖动
- 如何在 FabricJS 上缩放对象时停止控件边框填充增加
- 如何将自定义缩放控件添加到使用角度谷歌地图构建的地图中
- 将拖放区与 .NET 母版页和用户控件一起使用
- 拖放控件
- 谷歌地图缩放控件和标记消失
- 使用 JQUERY UI 从一个输入控件拖放到另一个输入控件
- 谷歌地图v3缩放控件未显示
- JavaScript Conform对话框不工作,如果我放入Asp.Net验证控件
- 如何启用拖动控件以滚动和扩展所选内容
- Openlayers-3:如何将缩放事件绑定到控件或文档
- 带点的OpenLayers DrawFeature控件破坏双击缩放
- 拖放插件拖动HTML控件
- 在拖放后获取对控件的引用
- 如何创建动态控件并将其数据放入对象中
- 将javascript变量放入浏览器控件winforms中
- Mediaelement.js在IE上回放后隐藏控件
- 缩放控件与谷歌地图区域中的自定义控件重叠