Question

I want to make an element which while dragged shows a transparent button, on drop should place a new button on the place where the pointer is.

Here‘s my code.

The problem is I can’t create another button. Also the alert("Test") is not executed. I don’t know what’s wrong

Answer 1

I’m getting the error:

Uncaught TypeError: Cannot call method 'appendTo' of null

in Chrome. This is why alert('test'); isn’t being executed.

You’re not using .css() correctly. Visit jQuery’s page on .css() to get the right syntax.

This code seems to be doing what you want (I get the “test” alert and I can create multiple buttons):

$('<button id="demo" class="default-button">Text</button>').css({left: x + "px", top: y + "px"}).appendTo('body');

[edit] To further clarify and teach, .css() with one parameter (that isn’t an object) returns the CSS, i.e. $('#id').css('top') returns the value of ‘top’ in CSS. If it’s an object map, like used in my solution or two paramaters, it sets those value(s) and returns the object for method chaining.

That’s why you were getting the error. It was returning the CSS value for “left 10px; top: 10px;” or whatever, and you were trying to do appendTo() on that string, thus an error.