javascript - jQuery UI, Droppable - Why this doesn't work -
this simple ... drag , drop in area. when set margin dragged element (.a1_73, .a2_73) nothing happend on dropped area. have no idea why. wrong ??? without margin works greate.
html
<div id="a1_73" class="empty">#a1</div> <div id="a2_73" class="empty">#a2</div> <div id="a3_73" class="empty">#a3</div> <div id="a4_73" class="empty">#a4</div> <div class="a1_73 dragme">.a1</div> <div class="a2_73 dragme">.a2</div> <div class="a4_73 dragme">.a3</div> <div class="a3_73 dragme">.a4</div>
javascript
$(".dragme").draggable({ start: function (event, ui) { $(this).put_element(); } }); $.fn.put_element = function () { $this = $(this).attr('class').split(" "); $this = $this[0]; $("#" + $this + "").droppable({ accept: "." + $this + "", drop: function (event, ui) { alert('ok'); } }) }
css
#a1_73 { width: 362px; height: 295px; margin-left: 748px; margin-top: 314px; position: absolute; } #a2_73 { width: 318px; height: 213px; margin-left: 421px; margin-top: 188px; position: absolute; } #a3_73 { width: 360px; height: 243px; margin-left: 23px; margin-top: 367px; position: absolute; } #a4_73 { width: 396px; height: 199px; margin-left: 19px; margin-top: 50px; position: absolute; } .a1_73 { margin: 162px 0px 0px 858px; position: absolute; } .a2_73 { margin: 97px 0px 0px 759px; position: absolute; } .a4_73 { margin: 33px 0px 0px 634px; position: absolute; } .a3_73 { margin: 231px 0px 0px 853px; position: absolute; } div { background-color: red; } .dragme { width: 100px; height: 100px; background-color: black; color: #fff; }
rk
try this.
html
<div id="a1_73" class="empty">#a1</div> <div id="a2_73" class="empty">#a2</div> <div id="a3_73" class="empty">#a3</div> <div id="a4_73" class="empty">#a4</div> <div class="a1_73 dragme">.a1</div> <div class="a2_73 dragme">.a2</div> <div class="a3_73 dragme">.a3</div> <div class="a4_73 dragme">.a4</div>
js
$(".dragme").draggable({ start: function (event, ui) { $(this).put_element(); } }); $.fn.put_element = function () { $this = $(this).attr('class').split(" "); $this = $this[0]; $("#" + $this + "").droppable({ accept: "." + $this + "", drop: function (event, ui) { alert('ok'); } }) }
css
#a1_73 { width: 362px; height: 295px; margin-left: 748px; margin-top: 314px; position: absolute; } #a2_73 { width: 318px; height: 213px; margin-left: 421px; margin-top: 188px; position: absolute; } #a3_73 { width: 360px; height: 243px; margin-left: 23px; margin-top: 367px; position: absolute; } #a4_73 { width: 396px; height: 199px; margin-left: 19px; margin-top: 50px; position: absolute; } .a1_73 { position: absolute; } .a2_73 { position: absolute; } .a4_73 { position: absolute; } .a3_73 { position: absolute; } div { background-color: red; } .dragme { width: 100px; height: 100px; background-color: black; color: #fff; }
Comments
Post a Comment