AshesOfOwls / jquery.shapeshift

A dynamic grid system with drag and drop functionality.
http://ashesofowls.github.com/jquery.shapeshift/
MIT License
1.67k stars 311 forks source link

Question: Textarea or input as handle for dragging #97

Open mciccarelli opened 10 years ago

mciccarelli commented 10 years ago

Hi- I'm trying to create a post-it note type UI. The following will disable dragging on the nodes, unless user grabs the specified handle selector.

JS:

$(".container").shapeshift({
  handle: '.dragger',
  dragWhitelist: '.draggable'
});

HTML:

<div class="container">
  <div class="draggable"><div class="dragger">DRAG ME</div></div>
  <div class="draggable"><textarea class="dragger">Some text</textarea></div>
  <div>Not draggable</div>
</div>

Only the first child node above can be dragged and only if user grabs the .dragger div.

Adding the .dragger class to a textarea or input element has no effect other than editing the text. Any idea on how to go about getting a textarea/input element to be draggable?

mciccarelli commented 10 years ago

So after some further thought, allowing users to drag from a textarea would break the standard text selection functionality. So I'm going to move forward with either showing an overlay on mouse over to act as a handle for dragging, and then include an edit link in order to update the text, or simply allocating a portion of the div for dragging.

Nice work on this plugin btw.