I want a toolbox like functionality in which i can drag an image and drop it over another image, such that the image being dragged should remain at the previous position as well as copied to the new position.

Recommended Answers

All 4 Replies

Thanks for your response,but this is not what exactly i want,,,this only moves the object from one position to another but i want to make it like toolbox e.g. if i drag a textbox from toolbox to my webpage,it remains on the toolbox also and i can drag 100's of such textbox.

Let me tell you in detail:

I am developing an application to manage post mortem report,so i want a functionality to allow user to create marks on the image of body ,there could be 3-4 types of marks ,so one can drag the mark to the corresponding body part.same mark can be required to be marked on several parts .

Please suggest the solution

hello nverma.
i want to give you the idea to handle this situation.
in fact it's very simple.
so lets say that we have a toolbox and we want to manage the drag and drop functionality,so the client can click with the mouse in a control or image in your case,or whatever you want,and drag this image to another location.
so lets say we have a toolbox of images.
so each image in the toolbox will be a "div run at server",each "DIV" have the image in his background and in addition,the image will be as element in that DIV,so we have this:

<div id="image1" runat="server" 
style="background-image:url('image1.jpg');width:100px;height:100px;position:relative;">
<img id="pic1" src="image1.jpg" width:100px height:100px style:"position:absolute;left:0px;top:0px" />
</div>

so that is each control or image in the toolbox.
so the user can drag the image inside the DIV,so you can use JavaScript or jquery,there is a lot of examples in the internet.
so now the user can drag an image from the toolbox,so if we want to speak as coding,the user while dragging the image from the toolbox,he change only the left and top attribute of that image,and the trick is that we have the same image at background,so the user can't notice what we do.
so the user will drag it and drop it in another "DIV run at server",so when he release the left click of the mouse,we do a postback to the server so the image in that original div (that we have move it),will recreate by the server,but the image that we have move it will gone!,so what we can do?
we can user 3 hidden field:
1)contain the value of left
2)contain the value of top
3)contain the value of the id of the image that we have move it
so from JavaScript we set these values and in page_load we use it to create in the new DIV (that we can drag in it the images) this new image with left and top attribute exactly where the user has drop it.
i hope that you can understand the idea that is very simple,and you can add whatever you want for achieving you purpose,but this is the main idea or the basics.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.