这个解决方案在 asp.net dragging picturebox inside winform on runtime 中是否可行
我只是希望能够在网络表单上移动图像
【问题讨论】：
标签： c# asp.net vb.net webforms
您引用的问题是用 Windows 窗体编写的。您不能像在 Windows 窗体中那样在 Web 窗体中拖放元素。
如果您想在 Web 应用程序中拖放元素，您应该使用客户端代码。
客户端最好的选择是使用库，我认为最好的选择是JQuery UI。 In the demo I linked 用户可以拖动一个 div 元素。这是一个带有静态图像和服务器端 ASP.NET 控件的简单拖动示例：
<head runat="server">
<script src="js/jquery-1.3.2.min.js" language="javascript" ></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" language="javascript" ></script>
<script type="text/javascript">
$(function() {
$("#draggable").draggable();
$("#<%= imgServerControl.ClientID %>").draggable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<!-- Static Draggable Image -->
<img src="ac-dc.jpg" id="draggable" />
<!-- ASP.NET server image control -->
<asp:Image ImageUrl="ac-dc.jpg" ID="imgServerControl" runat="server" />
</form>
</body>
</html>
【讨论】：
Canavar 和 John Saumders 试图说明的重点是，您需要了解 ASP.NET 和客户端 UI 代码之间的区别。
虽然 ASP.NET Webform 确实使用一定数量的客户端代码来完成它们的工作，但这主要与将 UI 事件传递到服务器端有关，以便它们可以被处理。
如果您的拖放操作导致某些服务器端数据操作（这很有可能），那么您还需要将适当的信息传达给服务器端。
所涉及的概念相当简单，但将它们全部联系在一起可能会有点棘手 - 并且很大程度上取决于您的底层网络表单和应用程序架构。
您能否提供有关应用程序功能的进一步说明，将图像从一个地方拖到另一个地方时您期望发生的情况，以及您是否/如何期望图像位置被记住。
【讨论】：
虽然我绝对建议尝试学习使用 JQuery 来做到这一点。 “最简单”的方法是利用 Asp.Net Ajax Control 工具包 DragPanel。 http://www.asp.net/AJAX/AjaxControlToolkit/Samples/DragPanel/DragPanel.aspx
【讨论】：
它在 Javascript 中的工作方式与在 Windows 窗体中的工作方式几乎相同：您处理鼠标移动事件和每个刻度，您根据鼠标的位置更新元素的位置。阅读event object in Javascript on w3schools，然后尝试这样的事情（这可能只适用于 IE，因为我刚刚测试过它）：
<html>
<body onmousemove="handleMouseMove(event)">
<img id="img"
onmousedown="handleMouseDown(event);"
onmouseup="handleMouseUp(event)"
src="http://img.youtube.com/vi/BML3EoeJ9Bk/default.jpg"
ondrag="return false" />
<script>
var dragging = false;
function handleMouseDown() {
dragging = true;
}
function handleMouseUp() {
dragging = false;
}
function handleMouseMove(evt) {
if (!dragging) return;
var img = document.getElementById('img');
img.style.position = 'absolute';
img.style.left = (evt.clientX - 5) + 'px';
img.style.top = (evt.clientY - 5) + 'px';
}
</script>
</body>
</html>
【讨论】：
我建议使用 JQuery-UI 可拖动插件： http://docs.jquery.com/UI/API/1.7/Draggable
$("img").draggable();
【讨论】：