1

I am trying to implement a jquery Drag and drop.

  1. I would like to know which is the most customizable plugin?
  2. Consider after the implementation of the drag and drop, i want to make the design responsive. For eg. The canvas area is 100 X 100 px. i place a square of size 25 X 25px in between. So its top and left would be 25 px. Now consider this design needs to enlarge itself on a full screen mode to fit the complete screen. The we would use width: 100% for the canvas but the top and left of the div added is 25px.

How can we make sure it fits all screen sizes? What are the steps i need to take while storing these parameters on a drag and drop? (store the top, left in percentages or px) or is there a better way with media-queries etc?

Thanks.

Ritesh Ksheersagar
  • 542
  • 7
  • 22
  • Use JqueryUI [Draggable](http://jqueryui.com/draggable/) && [Droppable](http://jqueryui.com/droppable/) combo. – Runcorn Jan 30 '15 at 08:09
  • Welcome to Stack Overflow! Good question in principle, but likely outside the parameters for questions on the site. What have you tried? Can you give us some code? From what you have tried, what isnt working? The above is too broad, and potentially too opinion based – SW4 Jan 30 '15 at 08:17
  • Hi SW4, I haven't tried it out yet. I will start with doing that soon. I asked this question just to make sure i am walking the right path. I will definitely start with implementation soon – Ritesh Ksheersagar Jan 30 '15 at 10:05

2 Answers2

2

You can use these two options:

  1. rubaxa-sortable is a fast, no-dependencies, small reorderable lists widget with touch support that works with the HTML5 native drag&drop API. You can use it with Bootstrap, Foundation, or any CSS library you want, and instantiating it only takes one line.

More detail: How can I implement a touch-sensitive, responsive, sortable list supporting drag & drop for Bootstrap?

  1. jQuery Resposive drag and drop plugin

    Demo

  2. http://jquer.in/tag/drag-drop/ - you can check plugin in this page, can help you.
Community
  • 1
  • 1
Mike Phils
  • 3,475
  • 5
  • 24
  • 45
0

Hey you have no need to use any plugin to do this. Just use jquery drag and drop from jquery site and integrate it into your application but in prior to do this just read the doc first as it will not take more than 15 minutes.

second solution for responsiveness is that when you will arrange your dropped item, first make a dummy canvas with dummy data inside it and create a responsive css for that and when you drag and drop anything at that time after drop you can apply same classes to dropped item. so your responsiveness will be same for the application. but i will suggest to not to use any plugin for that

M K Garwa
  • 495
  • 2
  • 13
  • Thanks Garwa, i will try this out. When you say add classes after drop, do you mean i should have them pre defined and according to the position add them. Can you give me a bery brief example? – Ritesh Ksheersagar Jan 30 '15 at 08:18
  • if you achieve and like this solution please accept the answer and give a handsup. and use bootstrap css to achieve responsiveness without any pain – M K Garwa Jan 30 '15 at 08:19
  • Yes Ritesh just use predefined classes and when you drop the element on canvas at that time you can apply that classes to dropped item – M K Garwa Jan 30 '15 at 08:21