Member Avatar for nverma

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.

  • 3 Contributors
  • 4 Replies
  • 458 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by cocoll

Dani AI

Generated

A practical, low-friction way to get a toolbox that “copies” items instead of moving them is to do the drag client-side and append a cloned element to your canvas on drop. was right to point toward jQuery UI for basic dragging; for your toolbox behavior use a clone helper on drag and create a new, independently draggable element when the item is dropped. ’s server-postback idea will work, but a modern flow keeps the UI responsive (no full postback) and persists placements with AJAX only when the user finishes.

// example (jQuery UI)
$('.toolbox .item').draggable({
  helper: 'clone',
  revert: 'invalid'
});

$('.canvas').droppable({
  accept: '.toolbox .item',
  drop: function(e, ui) {
    var $canvas = $(this);
    var left = ui.offset.left - $canvas.offset().left;
    var top  = ui.offset.top  - $canvas.offset().top;
    var $mark = ui.helper.clone().removeClass('ui-draggable-dragging').css({
      position: 'absolute', left: left, top: top
    }).appendTo($canvas);
    $mark.draggable({ containment: $canvas });
    // save left/top as percent for persistence (see below)
  }
});

Save positions relative to the image/container so marks survive resizing. Example conversion:

leftPct = (left / $canvas.width()) * 100;
topPct  = (top  / $canvas.height()) * 100;

Store type/id and these percentages (AJAX to server). When reloading, set left: X% and top: Y% on absolutely positioned marks inside a position:relative container so they scale with the image.

Troubleshooting tips: set a high z-index on dropped marks, use ui.helper (not ui.draggable) when helper:'clone' is used, and account for page scroll (use ui.offset). For touch, jQuery UI needs a touch adapter (or use Pointer Events / a lightweight touch library). Allow deletion (double-click or context menu) and make marks draggable after drop so users can fine-tune placement. This approach satisfies the requirement that toolbox items remain while copies are placed on the body image.

Recommended Answers

All 4 Replies

Member Avatar for hericles

Do you mean you want drag-and-drop functionality on your web page? Try jquery, there is a good example of the plug-in here:
http://jqueryui.com/demos/draggable/

Member Avatar for nverma

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.

Member Avatar for nverma

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

Member Avatar for cocoll

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.