Jquery Ui Droppable - How To Actually Change The Html?
Solution 1:
I made some changes to the HTML and CSS from your demo but I have something working. The HTML is simpler and has not affected the result, although if you need the previous layout my answer might not be totally right for you.
The full code is duplicated below as well as in a jsFddle demo. The code actually becomes a lot simpler after detaching the .boxArt and moving it in the DOM, since the animation just needs to change the top and left back to 0. The only difficult part was calculating the correct position to set the .boxArt to before animating. This is due to the draggable being relatively positioned to the element it was dragged from. As soon as it is moved in the DOM, this position is now completely incorrect. So the code works out and sets the draggable relative position to the new parent first (after moving it in the DOM) and then animates back to top:0,left:0.
This is working for me in Chrome but I have not tested in any other browsers. console.log left in to show what's going on.
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><title>title</title><styletype="text/css">.shelfRow {
width:1865px;
height:280px;
}
#shelves {
position:relative;
width:950px;
height:566px;
background:#CCC;
border:1px solid #333;
overflow-y:hidden;
overflow-x:auto;
}
.drop {
width:155px;
height:200px;
padding:2px;
margin-top:30px;
margin-left:25px;
float:left;
position:relative;
}
.dropHover {
padding:0px;
border:2px solid #0C5F8B;
-webkit-box-shadow: 003px1px#0C5F8B;
box-shadow: 003px1px#0C5F8B;
-moz-box-shadow: 0020px#0C5F8B;
}
.boxArt {
width:155px;
height:200px;
-webkit-box-shadow: 008px1px#1F1F1F;
box-shadow: 008px1px#1F1F1F;
-moz-box-shadow: 0020px#1F1F1F;
color:#000;
background:#FFF;
}
</style><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script><scripttype="text/javascript">
$(function() {
var shelfOffset = $('#shelves').offset();
var dropMarginTop = parseInt($('.drop').css('marginTop'));
var dropMarginLeft = parseInt($('.drop').css('marginLeft'));
$('.drop').droppable({
accept: function(el) {
return $(this).children('.boxArt').length === 0 && el.hasClass('boxArt');
},
tolerance: 'intersect',
hoverClass: 'dropHover',
drop: function(event, ui) {
ui.draggable.detach().appendTo($(this));
var originalOffset = ui.draggable.data('originalOffset');
console.log('originalOffset', originalOffset.top, originalOffset.left);
var boxArt = $(this).children('div');
var boxPosition = boxArt.position();
console.log('boxArt position', boxPosition.top, boxPosition.left);
var container = $(this);
var containerPosition = container.position();
console.log(container, containerPosition.top, containerPosition.left);
var newTop = originalOffset.top + boxPosition.top - containerPosition.top - shelfOffset.top - dropMarginTop;
var newLeft = originalOffset.left + boxPosition.left - containerPosition.left - shelfOffset.left - dropMarginLeft;
console.log('new offset', newTop, newLeft);
boxArt.css({top:newTop,left:newLeft}).animate({top:0,left:0});
}
});
$('.boxArt').draggable({
start: function(event, ui) {
$(this).data('originalOffset', ui.offset);
},
revert: 'invalid'
});
});
</script></head><body><divid="shelves"><divclass="shelfRow"><divclass="drop"></div><divclass="drop"><divclass="boxArt"id="boxArt2">2</div></div><divclass="drop"></div><divclass="drop"></div><divclass="drop"></div><divclass="drop"></div><divclass="drop"></div><divclass="drop"></div><divclass="drop"></div><divid="drop15"></div></div><divclass="shelfRow"><divclass="drop"><divclass="boxArt"id="boxArt1">1</div></div><divclass="drop"></div><divclass="drop"></div><divclass="drop"></div><divclass="drop"></div><divclass="drop"></div><divclass="drop"></div><divclass="drop"></div><divclass="drop"></div><divclass="drop"></div></div></div></body></html>
Post a Comment for "Jquery Ui Droppable - How To Actually Change The Html?"