Question

I’m trying to make a draggable and resizable button with jQuery UI, but it seems that it can’t do both.

$('.demo').resizable({grid: 10});
$('.demo').draggable({cancel:false, grid: [ 10,10 ] });

Here‘s my code.

Is this a jquery ui bug?

EDIT:

I’ve missed a </button>

Here’s my edited version: http://jsfiddle.net/nagwW/13/

Is there a way to make the resize arrow more closer to the button?

Answer 1

As you can see in this jsFiddle here, this does appear to be an issue, mainly with buttons, probably due to the fact that a wrapper is added upon .resizable() call.

Also, you can turn any element into button with a .click value, so why not just use a div, which can use both .resize and .drag with 0 problems and then use .button on that div, along with .click.

If you notice, my fiddle does exactly that

updated fiddle with your new stuff and my div representation as well
http://jsfiddle.net/SpYk3/nagwW/25/

Although, now that i think about it, you’re better off not allowing a change on the button, think about this, the user clicks the button to drag it somewhere, the drag completes, suddenly the click action is fired and their desired drag is now all messed up! That’s why jquery never intended on those features being used on buttons. Could cause way to many headaches, just fyi.