网页上移动图像(moving image on webpage)

在这种解决方案可能在asp.net 拖动图片框里面的winform上运行

我只是希望能够使图像移动围绕一个WebForm

Answer 1:

你提到的问题是写在窗口的形式。你不能drag'n拖放在您的网页表单元素以窗口的形式。

如果你想拖，然后在Web应用程序拖放元素，你应该使用客户端代码。

在客户端的最佳选择是使用图书馆和最好的一个是JQuery的UI在我看来。在演示中，我链接用户可以拖动一个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用户界面与可拖动的组件从这里，并把它添加到你的脚本文件夹中。

Answer 2:

问题的关键，即Canavar和约翰Saumders试图让，是你需要了解ASP.NET和客户端UI代码之间的区别。

虽然这是真的，ASP.NET Web表单不使用一定量的客户端代码做好自己的工作，这是大多与通信UI事件到服务器端，从而使它们可以被处理。

如果在一些服务器端数据操作的拖放操作的结果（这是极有可能），那么你还需要进行沟通相应的信息到服务器端。

所涉及的概念是相当简单的，但把它们绑在一起都可以slighlty棘手 - 并在很大程度上取决于你的潜在WebForms和应用架构。

你能rpvide的应用功能，你希望发生什么，当图像从一个地方拖到另一个进一步解释，如果/你如何期望图像位置被记住。

Answer 3:

虽然我绝对推荐努力学习用jQuery做到这一点。在“最简单”的方式做到这一点会采取Asp.Net AJAX控件工具包DragPanel的优势。 http://www.asp.net/AJAX/AjaxControlToolkit/Samples/DragPanel/DragPanel.aspx

Answer 4:

它的工作原理在Javascript几乎相同的方式，因为它在Windows窗体：你处理鼠标移动事件和每个刻度，您更新基于鼠标的位置的元素的位置。阅读关于在Javascript事件对象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>