$(document).ready(function() {
$("#dvv").mousedown(function() {
$("#dvv").mousemove(function(e) {
$("#dvv").css({ 'margin-top': e.pageY - 15, 'margin-left': e.pageX - 15 });
});
});
<div id="dvv" style="background-color: Blue; width: 150px; height: 150px; margin: 250px 550px;
cursor: move;">
te开发者_如何学Cst Div
</div>
Div Click nonstop drag help me
Please note: I've never tried to implement this before, but this seems like a start.
Please note that I removed the margins from your div, and added absolute positioning, so it is not the original element you started with.
Hopefully this will give you something to work with.
UPDATE: Just changed it a bit. Now, using offset(coordinates) instead of css, it works regardless of margin settings, and absolute positioning doesn't need to be set.
<div id="dvv" style="background-color: Blue; width: 150px; height: 150px; margin: 0; cursor: move;">
test Div
</div>
$("#dvv").mousemove(function(e) {
if($(this).hasClass('moving')) {
$(this).offset({ 'top': (e.pageY - $(this).data('offsety')), 'left': (e.pageX - $(this).data('offsetx')) });
}
});
$("#dvv").mousedown(function(event) {
$(this).data('offsetx', (event.pageX - $(this).offset().left) );
$(this).data('offsety', (event.pageY - $(this).offset().top) );
$(this).addClass('moving')
});
$("#dvv").mouseup(function() {
$(this).removeClass('moving')
});
Check out jQueryUI. It has a "draggable" and a "droppable" component that will get you going with plenty of examples.
精彩评论