is this solution possible in asp.net http://stackoverflow.com/questions/1086989/dragging-picturebox-inside-winform-on-runtime
i just want to be able to move an image around on a webform
+3
A:
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.
Canavar
2009-07-06 14:04:19
sorry i am noob. would i just paste the source into asp.net? can you be more specific on how i can use this?
I__
2009-07-06 14:09:34
Take a look at my updated answer, hope this helps.
Canavar
2009-07-13 12:53:52
u need to download Jquery library and put it in the JS folder.
waqasahmed
2009-07-13 12:57:19
+2
A:
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.
belugabob
2009-07-09 09:45:13
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.
I__
2009-07-09 09:50:01
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
2009-07-09 09:56:37
+1
A:
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
+1
A:
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>
Rahul
2009-07-10 15:59:16
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
2009-07-13 07:19:17
+1
A:
I would suggest JQuery-UI draggable plugin: http://docs.jquery.com/UI/API/1.7/Draggable
$("img").draggable();
Benoit Vidis
2009-07-15 07:51:56