hugonoro

Hi OSUblake, as usual your reply is a life savior . Thank you for your (once again) simple and clean solution, You're the man

Yes, exactly . That was / is my initial problem. Thanks a lot for your help anyway. There are couple of possible workarounds but I was trying to figure out if it was possible to do it with the draggable itself.

Well the lasso bit always works fine. But you are also able to click to select one element. You don't necessarily need to lasso all the time. You can click or ctrl + click to select multiple for instance.

Hi Dipscom, so I've setup a very simple example that tries to reflect the issue I'm facing. So when the line 6 is not commented $('.box').attr('data-clickable', true); if you click the element you see it becoming selected and if you ctrl + click you see it becoming unselected. But you can no longer drag the element. If you comment the same line you can drag the element but the expected functionality of selection is no longer working. I'm assuming somewhere down the line the click event is being swallowed. As you can see in my example I'm not manipulating any events. Hence my conclusion . Let me know what you think. http://codepen.io/hugonoro/pen/WRVXYd

Hi Dipscom, thank you for the reply. Yes I am aware of the events and I've done a few advanced options already. But the problem seems to be with the click event itself. So basically with Jquery UI Selectable, when an element is mouse clicked, it's state changes to "ui-selected". Meaning, the element needs to be listening to the click event. I was trying to allow the draggable to be clickable (triggering actions on click) by setting the draggable=true attribute. But this kills the ability for it to be draggable. Apparently the regular OnClick event is hooked up when the mouse clicks but it seems that is not bubbling up, so it's not being captured by the Jquery UI selectable.

Hi Guys, I'm trying to achieve something but I'm a bit stuck. So I'm trying to integrate the Jquery UI selectable with the Draggable. Basically I want to be able to tell an element is clickable (I know I can set the draggable=true attribute) and draggable at the same time. Is this possible? Do I need to create additional layers on the element? The goal is to visually only appear to be 1 element (for instance an image, a thumbnail, etc.) I hope it wasn't too confusing Thanks, Hugo Noro

HI Blake, yes, that's exactly the solution I was looking for. Many thanks for your help

Hi Guys, I'm trying to achieve something that probably is very simple but I think i surely missing something. So let's say I have a draggable in the position x:800 y: 200 Now I drag it to the position x:500 y:100, and after releasing the draggable, and from this point onward, I want to make the origin of the draggable this last position. So all the transformations would be applied from this last position. I hope my explanation makes sense . Is there a simple way of achieving this? Thanks.

Hi Blake, that's perfect. I've reached a solution where I was creating some constraints for the elements size but this solution is exactly what I was looking for. Thank you very much for your help.

I did, the problem with that is that I don't want the handle to move to the left of the element otherwise it will make the element disappear. That's why I'm struggling with this, from the beginning. I need to be able to define a minX So I can never allow it to be smaller than a specified size. The whole Idea is never let the rectangle be smaller than a specific size. Otherwise, yes, your suggestion would solve it

You're absolutely right. OK so I've created a small codepen to try to explain it better. So in the following codepen if you try to drag the rectangle you can see it will be bound to the limits of the grid. The problem is when you move it, for instance, to 2/3 to the right of the grid, I would like the rectangle not to be able to expand to outside of the grid. The rectangle is bound to the "container" grid. But I would like to define the bounds with a {minX, maxX} so I can define minimum size. By doing this I've not been able to restrict the growth of the rectangle to always be inside the grid, independently of its position Makes sense? http://codepen.io/hugonoro/pen/GNXOyz

Hi swampthang, not really because I'm trying this on a project and it's integrated with several other functionalities.

Hi Guys, I know it's been a while since this discussion is started but I'm struggling with a couple of small issues. I've followed OSUblake examples to create a resizable draggable. All is good in that part. My problem now is that I'm trying to define bounds on it but it's being a pain because on the examples provided (basically a child draggable inside a parent one, when dragged expands the parent - http://codepen.io/osublake/pen/EaXNMd) the child draggable resets it's coordinates, as expected, every time the parent one moves to a different place. To create some context, based on the example provided on the codepen created by OSUblake, I'm considering the parent draggable the square and the child draggable the expand handle. How would you suggest a simple solution for creating bounds for the whole group. Meaning I would still be able do drag around the square but I don't want it to be able to expand to outside of a specified limit. Remember the handle draggable resets it's x coordinates every time we move the square. To make simple I'm only expanding over the X axis. Any help on this would be brilliant. Thanks.

Yes, that's exactly what I wanted . I can basically extend the draggable per instance. Perfect!! Thank you for the quick reply and the simple solution. Keep up with the great work. Awesome tool

Hi Diaco, thank you for the quick reply. yes I understand your example, but this means I will have to store it for each element before start dragging, right? I will have to keep some sort of temporary state.