moving image on webpage

Question

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

@alex: with respect, if you don't know that it's an image ( tag) on a web page, and that this would all be client-side that you'd have to do in JavaScript, then it may be too soon for you to attempt this. — John Saunders, Jul 06 '09 at 14:22
ooh i see what you are saying, now i understand your edit. but in any case, do you have a solution for this? — Alex Gordon, Jul 07 '09 at 14:57

Canavar · Accepted Answer · 2009-07-13T20:21:59.513

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.

sorry i am noob. would i just paste the source into asp.net? can you be more specific on how i can use this? — Alex Gordon, Jul 06 '09 at 14:09
u need to download Jquery library and put it in the JS folder. — waqasahmed, Jul 13 '09 at 12:57

score 2 · Answer 2 · answered Jul 09 '09 at 09:45

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.

thank you very much for your response. i will not need any interaction with the server. i just need to be able to move around images on a board. it's very simple. — Alex Gordon, Jul 09 '09 at 09:50
In that case, try to concentrate on the client-side aspect of things (Jquery example provided by Canavar) and don't get too fixated on the ASP.NET side of things. — belugabob, Jul 09 '09 at 09:56

score 1 · Answer 3 · answered Jul 09 '09 at 19:11

1

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

answered Jul 09 '09 at 19:11

studiothat

923
3
13
20

score 1 · Answer 4 · answered Jul 10 '09 at 15:59

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>

Handling drag and drop without a library can be a pain to get working cross-browser; for instance, "ondrag" isn't an event in browsers that aren't IE, but you need it in IE. evt.clientX and Y may be (I can't remember exactly) named differently in other browsers as well. So this is a start to understand how things work, but as other posters have said, it's recommendable to take the next step and start using a library that helps normalize the differences between browsers, such as jQuery. — Rahul, Jul 13 '09 at 07:19

score 1 · Answer 5 · answered Jul 15 '09 at 07:51

1

I would suggest JQuery-UI draggable plugin: http://docs.jquery.com/UI/API/1.7/Draggable

$("img").draggable();

answered Jul 15 '09 at 07:51

Benoît Vidis

3,908
2
23
24

moving image on webpage

5 Answers5

Linked