javascript可拖动脚本跟踪位置_Javascript_Jquery

javascript可拖动脚本跟踪位置

javascript jquery

javascript可拖动脚本跟踪位置,javascript,jquery,Javascript,Jquery,我遵循以下指南：我认为这很难理解，而且我似乎不知道要添加什么来跟踪我拖动的元素的位置。如果你在网站上看，你可以看到最后一个例子，他们在那里做这件事。到目前为止，我的例子如下： <div id="house_wall1"> <img src="xxx" class="draggie" style="position:relative;"> <img src="xxx" class="draggie" style=

我遵循以下指南：我认为这很难理解，而且我似乎不知道要添加什么来跟踪我拖动的元素的位置。如果你在网站上看，你可以看到最后一个例子，他们在那里做这件事。到目前为止，我的例子如下：

   <div id="house_wall1">
            <img src="xxx" class="draggie" style="position:relative;">
            <img src="xxx" class="draggie" style="position:relative;">
            <img src="xxx" class="draggie" style="position:relative;">
            <!--Cypyrights and many thanks to http://desandro.mit-license.org for element movements -->
             <?php if (login_check($mysqli) == true) : ?>
                <p>Welcome <?php echo htmlentities($_SESSION['username']); ?>!</p>
                <?php
                    echo $username;
                ?>
            </div>
            <script type="text/javascript" src="draggabilly.pkgd.min.js"></script>


                            <script>
    ( function() {
      var container = document.querySelector('#house_wall1');
      var elems = container.querySelectorAll('.draggie');
      for ( var i=0, len = elems.length; i < len; i++ ) {
        var elem = elems[i];
        new Draggabilly( elem, {
      containment: true
      });
     }
   })();


function onDragMove( instance, event, pointer ) {
  console.log( 'dragMove on ' + event.type +
    pointer.pageX + ', ' + pointer.pageY +
    ' position at ' + instance.position.x + ', ' + instance.position.y );
}
// bind event listener
draggie.on( 'dragMove', onDragMove );
// un-bind event listener
draggie.off( 'dragMove', onDragMove );
// return true to trigger an event listener just once
draggie.once( 'dragMove', function() {
  console.log('Draggabilly did move, just once');


});


欢迎光临
（功能（）{
var container=document.querySelector（“#house_wall1”）；
var elems=container.querySelectorAll（'.draggie'）；
对于（变量i=0，len=elems.length；i


这个脚本可以使图像四处移动，但它还不能跟踪它们的位置，即使我尝试将其添加到脚本的底部，如您所见。有人知道什么是错的，什么是需要的吗？我对Jquery、Javascript相当陌生。非常感谢。
将您的代码更改为此，对我来说很好。您只需要使用offset（）方法获取被拖动元素在被拖动时的位置，并使用position（）方法获取被拖放位置的坐标
HTML:
嘿，谢谢你的代码，但我想使用指南中显示的方法，因为我不想把太多不同的脚本混合在一起。我现在可以跟踪图像位置，但无法输出结果。。嗯，实际上，我试过最简单的代码，你的代码有点复杂。在我的示例中，输出是使用.text（）方法显示的。如果您愿意，您可以尝试此方法。@user33164770哦，是的，它工作得很好，但是，是否可以这样做，图像不能在整个页面上移动，而只能在特定的div中移动？感谢定位元素也必须从div顶部开始，而不是从主体开始，以便具有其他分辨率的用户获得其他位置。谢谢：）是的……这是可能的。您需要使用draggable元素的“containment”属性。检查我的编辑。
//include these files.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src=" http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<body>

<div id="container">
<img id="productid_1" src="Lionel Messi New Wallpaper 2012 07.jpg" class="item" alt="" title=""  height="100px" width="100px"/>
<img id="productid_2" src="bienvenidos_a_uniformes_deportivos_monterrey_4_216235520.jpg" class="item" alt="" title="" height="100px" width="100px" />
<img id="productid_3" src="lionel-messi-wallpapers-hd.jpg" class="item" alt="" title="" height="100px" width="100px"/>

        <?php if (login_check($mysqli) == true) : ?>
        <p>Welcome <?php echo htmlentities($_SESSION['username']); ?>!</p>
        <?php
            echo $username;
        ?>
</div>

<div id="start">Waiting for dragging the image get started...</div>
<div id="stop">Waiting image getting dropped...</div>
<ul>
    <li id="posX"></li>
    <li id="posY"></li>
</ul>

</body>

<script>

$(document).ready(function(){
$(".item").draggable({

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

// Find original position of dragged image.
start: function(event, ui) {

    // Show start dragged position of image.
    var Startpos = $(this).position();
    $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
},

// Find position where image is dropped.
stop: function(event, ui) {

    // Show dropped position.
    var Stoppos = $(this).position();
    $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
}
});
});

</script>

$(document).ready(function(){
$(".item").draggable({
containment: '#limit_div',
drag:function(){......
//where #limit_div will be parent div of the #container div.