可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

is this solution possible in asp.net dragging picturebox inside winform on runtime

i just want to be able to move an image around on a webform

回答1:

The question you referenced is written in windows forms. You can not drag'n drop elements in your web form as in windows forms.

If you want to drag and drop elements in a web application, you should use client side code.

The best option in client side is to use a library, and the best one is JQuery UI in my opinion. In the demo I linked user can drag a div element. Here is a simple dragging example with a static image and a server-side ASP.NET control :

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

Note : To test this code, all you need to do is to download the JQuery UI with draggable component from here and add it to your script folder.

回答2:

The point, that Canavar & John Saumders are trying to make, is that you need to understand the distinction between ASP.NET and client side UI code.

Whilst it's true that ASP.NET Webforms do use a certain amount of client-side code to do their work, this is mostly related to communicating UI events to the server-side , so that they can be processed.

If your drag-drop operation results in some server-side data manipulation (And this is highly likely) then you would also need to communicate the appropriate information to the server-side.

The concepts involved are fairly straightforward, but tying them all together can be slighlty tricky - and depends heavily on your underlying webforms and application architecture.

Could you rpvide further explanation of the application functionality, what you'd expect to happen when an image is dragged from one place to another, and if/how you expect the image position to be remembered.

回答3:

While I definitely recommend trying to learn to do this with JQuery. The "easiest" way to do this would to take advantage of the Asp.Net Ajax Control toolkit DragPanel. http://www.asp.net/AJAX/AjaxControlToolkit/Samples/DragPanel/DragPanel.aspx

回答4:

It works pretty much the same way in Javascript as it does in a windows form: you handle the mouse move event and each tick, you update the position of the element based on the position of the mouse. Read about the event object in Javascript on w3schools, then try something like this (which will probably only work in IE, as that's where I just tested it):

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