Home/ Questions/Q 9131109
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T08:05:20+00:00

Hi im trying to create a draggable object what i have sort of works

  • 0

Hi im trying to create a draggable object what i have sort of works but the mouse keeps snapping to the center of the object how can i fix this. here is my example.
I would Like the mouse to stay where ever the user clicks the object

<html>
  <head>
    <script type="text/javascript" src="javascript/jquery-1.8.2.min.js"></script>
    <title></title>
<style>
body {
margin: 0px;
padding:0px;
}

#main {
    margin-left: auto;
    margin-right: auto;
    width: 980px;
    height:600px;
}
.contents {
font-family: sans-serif,arial;
font-style: normal;
font-weight: 100;
font-variant: normal;
font-size: 11px;
}

.callout {
position: relative;
margin: 18px 0;
padding: 18px 20px;
background-color: #88BDE9;
border-radius: 6px;
max-width: 550px;
width: 300px;
font-family: sans-serif,arial;
font-weight: bolder;
font-variant: small-caps;
font-style: oblique;
}

.callout .notch{
position: absolute;
top: -10px;
left: 20px;
margin: 0;
border-top: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #88BDE9;
padding: 0;
width: 0;
height: 0;
}

.border-callout{
border:1px solid #6D5151; 
padding:17px 19px;
box-shadow: 0px 0px 25px rgba(0, 0, 0,0.5);
}

.border-callout .border-notch{ 
border-bottom-color:#6D5151;
top: -11px;
}
</style>
  </head>
  <body>

          <div id="main">
              <div class="callout border-callout">
                This is a callout
                <p class="contents">And here is some more text so we can see the diiferent fonts and so on.</p>
                <b class="border-notch notch"></b>
                <b class="notch"></b>
              </div>
          </div>
<script type="text/javascript">
var $dragging = null, w, h;
    $(document.body).on("mousemove", function(e) {
        if ($dragging) {
            $dragging.offset({
                left: e.pageX - w,
                top: e.pageY - h
            });
        }
    });
    $(document).on('mousedown', 'div.callout', function(e){
        $dragging = $('div.callout'),
        w = $dragging.width() / 2,
        h = $dragging.height() / 2
    });
     $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });
</script>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Replace the mousedown event handler as follow

    $(document).on('mousedown', 'div.callout', function(e){
        $dragging = $('div.callout'),
        w = e.pageX-$(this).position().left,
        h = e.pageY-$(this).position().top

    });
    • 0