简体   繁体   中英

How I get the safe specification of left position from a movable div in a centered div?

I am trying to get a safe position specification for my moveable div in several window solutions and sizes. I want to have one 0 position at the left side of the droppable area (#drop1). The jQuery-function position() is not enough for this task.It is understandable what I mean? I do there an alert with several position specifications and differences between, but I don't get an steady result for the position of my moveable div. jsFiddle

alert('e.pageY-this.offset().top:'+(e.pageY - $(this).offset().top)+"\n"
     +'e.pageX-this.offset().left: '+(e.pageX - $(this).offset().left)+"\n"
     +'e.pageX/e.pageY: '+e.pageX+'/'+e.pageY+"\n"
     +'offset(left/top): '+$(this).offset().left+'/'+$(this).offset().top+"\n"
     +'posLeft/pos.top: '+pos.left+'/'+pos.top+"\n"
     +'draggable.position(left/top): '+ui.draggable.position().left+'/'+ui.draggable.position().top+"\n"
     +'draggable.offset(left/top): '+ui.draggable.offset().left+'/'+ui.draggable.offset().top+"\n"
     +'dropPositionX-dragItemOffsetX: '+dropPositionX+' - '+dragItemOffsetX+"\n"
     +'innerWidth: '+window.innerWidth+"\n"
     +'Main centered area width: '+$('#main').css('width')+'- bar left width: '+$('.col').css('width')+"\n"
     +'position calculated: '+((window.outerWidth/2-parseInt($('#main').css('width'))/2+100)));

Html:

<div align="center" width="100%">
 <div id="drag1" class="ui-widget-content" rel="a"><p>drag 1</p></div>
 <div id="drag2" class="ui-widget-content" rel="b"><p>drag 2</p></div>

 <div id="main">
   <div class="col">&nbsp;</div>
   <div id="drop1" class="bg1">
    <div id="drop-inner1" class="widget1"><p>AREA 1</p></div>
    <div id="drop-inner2" class="widget1"><p>AREA 2</p></div>
   </div>
   <div class="col">&nbsp;</div>
 </div>
</div>

<div style="clear: both;">&nbsp;</div>

I found a solution by myself.

THIS was what I am searching for:

  var diffDragX = (ui.draggable.offset().left - $('#drop1').offset().left);
  var diffDragY = (ui.draggable.offset().top - $('#drop1').offset().top);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM