Drag and Drop - Javascript or Jquery

Asked

Viewed 615 times

1

Good morning to you... I was challenged to convert a C# Desktop application to Web, but I have no knowledge of ASP.NET, Jscript or Jquery. And among the components I need to adapt is a DRAGDROPTEXT. It is a SPAN within a DIV that is capable of being draggable to another DIV. I did this through Javascript and HTML5. The internet is full of basic examples for this. So far no big deal.

To illustrate what I need to implement I will describe part of the scenario:

On the screen there are several DIVS, then types: Drag and Container, the names are brought from a bank and at that moment I customized the DIV name in the WEB application, example: Dragrdragdroptext2354, Recipientedragdroptext2354, .... where the final number is a bank ID. The screen is composed of exercises to complete gaps of a said course, so you will have some pairs of DIV (drag and container). On this screen in question, there are 5 pairs of these DIVS.

What I need to implement and can’t: If the user at the end of the drag and drop actions realizes that an answer is wrong and wants to redo the dragdrop the program should allow that when dragging the DIV that is already in the response field it was possible for the user to drop the mouse click on any area of the screen and if in that area of the screen that was released the mouse is not a DIV so the DIV that has just been released should return to its starting position. Note that starting here would be the situation BEFORE the DIV was dragged for the first time.

Please remember I have no knowledge of JQUERY, Jscript or ASP.Net.

Thank you for your cooperation!

  • despite making little difference, but how are you starting with ASP.NET and Javascript, I wonder if you are using MVC or Webforms? This will not change Javascript, but how to insert it in the page.

  • In the case of Webforms.

  • unfortunately I am not in time to carry out the whole implementation. but you can take a look at this answer: http://answall.com/questions/50690/como-mover-um-element-at%C3%A9-a-posi%C3%A7%C3%A3o-do-outro-com-jquery/50733#50733, which has an implementation for drag & drop.

  • Leandro, since you are starting with Webforms, I advise you to read the following material: http://blogs.msdn.com/b/pranav_rastogi/archive/2012/09/21/asp-net-4-5-scriptmanager-improvements-in-webforms.aspx. Especially in how to use Bundle, Optimization and Cdn. I say this pq is common we devs just drag the scripts to the page, and this is not advisable for Webforms applications.

  • The default and basic implementation for Drag and Drop in Jscript is: Function allowDrop(Ev) { Ev.preventDefault(); } Function drag(Ev) { Ev.dataTransfer.setData("text", Ev.tar.id); } Function drop(Ev) { Ev.preventDefault(); var data=Ev.dataTransfer.getData("Text"); Ev.target.appendchild(Document.getElementById(data); }

  • This help on how to comment using code, here on the site, did not help at all :/

Show 1 more comment

1 answer

0

Take a look around in this example. You’ll have to:

  1. change the way the reset is triggered - instead of pressing the reset button, it is when you drop an item into the void;
  2. instead of resetting all items, it’s only the one dropped into the void.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.