Bildausschnitt im Newsserver wählen

Defining picture detail

by Fiddel

HTML

<div class="passepartout">


<div class="pic">
    <div id="posX"></div>
    <div id="posY"></div>
</div>


</div>

CSS

.passepartout {
  width:600px;
  height:250px;
  overflow:hidden;
  background:silver;
}




.pic {
  display:table-cell;
  height: 500px;
  width: 600px;
  padding:5rem;
  background:red;
  box-sizing:border-box;
}

JavaScript

$('.pic').draggable(
    {
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        }
    });Define picture detail