Question

我正在关注本指南：http://draggabilly.desandro.com/ 我认为这很难理解，我似乎无法弄清楚要添加什么来跟踪我拖动的元素的位置。如果您在网站上查看，您可以看到他们执行此操作的最后一个示例。到目前为止我的例子是：

   <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');


});

这个脚本可以移动图像但是它不会跟踪它们的位置，即使我已经尝试在脚本的底部添加它，如你所见。有没有人知道什么是错的或什么需要？我在Jquery，Javascript上相当新。非常感谢。

Answer 1

将您的代码更改为此，对我来说工作正常。你只需要使用offset（）方法来获取被拖动元素被拖动时的位置，并使用position（）方法来获取它被放置的位置的坐标。

HTML：

//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>

JQUERY：

<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.

javascript draggable脚本跟踪位置

1 个答案: