在asp.net+jquery中将图像从一个面板拖放到另一个面板
在asp.net+jquery中将图像从一个面板拖放到另一个面板
提问于 2014-09-22 16:34:18
考虑一个场景，我有两个面板
-> Div-1 \f25 I-1\f6具有从文件系统加载的单个图像
-> Div-2我有多个像6-8这样的asp.net面板。
我需要将图像从Div-1拖放到Div-2中，具有以下功能。
我需要将单个图像从Div-1拖动到Div-2中的面板。在将图像放入面板后，如果需要，用户应该能够将图像移动到任何其他面板，如果他认为自己拖放了错误的图像，他应该能够删除图像，以便可以将它们放回左侧面板上。
回答 3
Stack Overflow用户
发布于 2014-09-22 16:50:39
试试这个：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>来源:查看此http://jqueryui.com/droppable/
Stack Overflow用户
发布于 2014-09-22 16:51:37
您可以使用解决方案的** jquery ui Draggable **接口来实现所需的。它支持您可以check here的事件
使用以下代码作为
$(document).ready(function(){
$("#draggable").draggable();
});Draggable提供的事件
$( "#draggable" ).draggable({
start: function() {
// your logic
},
drag: function() {
// your logic
},
stop: function() {
// your logic
}
});希望能有所帮助
Stack Overflow用户
发布于 2014-09-22 17:54:25
检查此示例：-
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
img
{
height: 100px;
width: 100px;
}
#dvDest
{
border: 5px solid #ccc;
padding:5px;
height: 100px;
width: 200px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script type="text/javascript">
$(function () {
$("#dvSource img").draggable({
drag: function (event, ui) {
ui.helper.css("opacity", "0.7");
}
});
$("#dvDest").droppable({
drop: function (event, ui) {
if ($("#dvDest img").length == 0) {
$("#dvDest").html("");
}
ui.draggable.css("position", "static");
ui.draggable.css("opacity", "1");
$("#dvDest").append(ui.draggable);
}
});
});
</script>
<div id="dvSource">
<img alt="" src="Your Images path" />
<img alt="" src="Your Images path" />
</div>
<hr />
<div id="dvDest">
Drop here
</div>Example
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25969730
复制相关文章
相似问题
腾讯云开发者
