Question

这个解决方案可以在asp.net dragging picturebox inside winform on runtime

中使用

我只是希望能够在webform上移动图像

Answer 1

您引用的问题是用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>

注意：要测试此代码，您只需要下载带有可拖动组件JQuery UI的from here并将其添加到您的脚本文件夹中。

Answer 2

关键点，Canavar＆amp; John Saumders正在尝试制作，您需要了解ASP.NET和客户端UI代码之间的区别。

虽然ASP.NET Webforms确实使用了一定数量的客户端代码来完成他们的工作，但这主要与将UI事件传递到服务器端有关，因此可以对它们进行处理。

如果您的拖放操作导致某些服务器端数据操作（这很有可能），那么您还需要将适当的信息传达给服务器端。

所涉及的概念相当简单，但将它们捆绑在一起可能非常棘手 - 并且在很大程度上取决于您的基础网络表单和应用程序架构。

您是否可以进一步了解应用程序功能，将图像从一个地方拖动到另一个地方时会发生什么，以及是否/您希望记住图像位置。

Answer 3

虽然我绝对建议尝试使用JQuery来学习。 “最简单”的方法是利用Asp.Net Ajax Control工具包DragPanel。 http://www.asp.net/AJAX/AjaxControlToolkit/Samples/DragPanel/DragPanel.aspx

Answer 4

它在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>

Answer 5

我建议使用JQuery-UI可拖动插件： http://docs.jquery.com/UI/API/1.7/Draggable

$("img").draggable();

在网页上移动图像

5 个答案: