droppable div does not stay where it was dropped

Question

I have this fiddle : http://jsfiddle.net/vdbb7c6n/

Click on Go then drag a number on the left or right of a big line ! On first drop, it jumps to the middle of the div whereas it should not.

the css used for those draggable is :

 .dollar, .diese {
    display: inline-block;
    width: 25px;
    padding: 2px;
    border: 1px solid black; 
    background: #FCB08B;
    border-radius: 2px;
    font-weight:bolder;
    color : white;
    text-shadow:0 0 20px #933D14;
  }

on drop I add this class

.item{
    position : absolute;
    width:80px;
    height:80px;
    font-size: 3em;
  }

There is probably something to do with the clone but I can't figure it out !?

Answer 1

you have to adjust the position of your clone after you add it to your drop target: here's a link to your updated fiddle: http://jsfiddle.net/vdbb7c6n/2/

$(clone).css({"left": (event.clientX - $(clone).width()/2), "top" : (event.clientY- $(clone).height()/2)});

please note that this will not ensure that your clone is nicely positioned inside your div - you need to adjust the math some to ensure it fully fits within the boundaries.