Jquery UI可拖动错误定位关联父容器

时间：2017-12-14 16:44:33

标签： jquery jquery-ui draggable

我遇到了jquery-ui draggable的问题。父容器中有一个大块。在可拖动的内部块中，我有许多图像，可以生成带有碎片的地图图像。需要在父div内拖动此图像地图，就像我们通常拖动每个地图一样。

这是我的代码：

<div class="map_container">
                <div class="map_inner">
            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_01.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_02.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_03.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_04.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_05.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_06.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_07.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_08.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_09.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_10.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_11.gif" width="715" height="1228" alt="">



            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_12.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_13.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_14.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_15.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_16.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_17.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_18.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_19.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_20.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_21.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_22.gif" width="713" height="1228" alt="">



            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_23.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_24.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_25.gif" width="1228" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_26.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_27.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_28.gif" width="1228" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_29.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_30.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_31.gif" width="1228" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_32.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_33.gif" width="713" height="1229" alt="">



            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_34.gif" width="1229" height="1230" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_35.gif" width="1229" height="1230" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_36.gif" width="1228" height="1230" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_37.gif" width="1229" height="1230" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_38.gif" width="1229" height="1230" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_39.gif" width="1228" height="1230" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_40.gif" width="1229" height="1230" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_41.gif" width="1229" height="1230" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_42.gif" width="1228" height="1230" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_43.gif" width="1229" height="1230" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_44.gif" width="713" height="1230" alt="">
            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_45.gif" width="13000" height="26" alt="">


            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_46.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_47.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_48.gif" width="1228" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_49.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_50.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_51.gif" width="1228" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_52.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_53.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_54.gif" width="1228" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_55.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_56.gif" width="713" height="1229" alt="">


            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_57.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_58.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_59.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_60.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_61.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_62.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_63.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_64.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_65.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_66.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_67.gif" width="713" height="1228" alt="">


            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_68.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_69.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_70.gif" width="1228" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_71.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_72.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_73.gif" width="1228" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_74.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_75.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_76.gif" width="1228" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_77.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_78.gif" width="713" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_79.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_80.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_81.gif" width="1228" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_82.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_83.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_84.gif" width="1228" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_85.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_86.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_87.gif" width="1228" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_88.gif" width="1229" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_89.gif" width="713" height="1229" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_90.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_91.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_92.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_93.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_94.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_95.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_96.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_97.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_98.gif" width="1228" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_99.gif" width="1229" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_100.gif" width="713" height="1228" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_101.png" width="1229" height="1231" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_102.gif" width="1229" height="1231" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_103.gif" width="1228" height="1231" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_104.gif" width="1229" height="1231" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_105.gif" width="1229" height="1231" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_106.gif" width="1228" height="1231" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_107.gif" width="1229" height="1231" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_108.gif" width="1229" height="1231" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_109.gif" width="1228" height="1231" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_110.gif" width="1229" height="1231" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_111.jpg" width="713" height="1231" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/map_112.gif" width="13000" height="26" alt="">


            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1228" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1228" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1227" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1228" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1227" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="2" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1227" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1227" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="2" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1227" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="2" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1226" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="2" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="1227" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="2" height="1" alt="">

            <img class="lazy map_slice" src="http://pvdinvest.ru/wp-content/themes/businessx/images/map/spacer.gif" width="713" height="1" alt="">

                </div>
            </div>

和js 

$('.map_inner').draggable({
    containment: '.map_container'
})

和css 

.map_container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 900px;
}
.map_inner {

    position: absolute;
    width: 13000px;
    height: 12341px;
    top: 0;
    left: 0;

}
.map_inner img {
    float: left;
    border: none;
    margin: 0;
    padding: 0;
}

https://jsfiddle.net/jkrqmsoy/

我无法解决我的问题，请推荐我插件来做到这一点。

1 个答案:

答案 0 :(得分：0)

如果要使用Draggable，则不希望拖动图块或图像。您需要根据用户启动的移动来调整整体位置。

考虑这个HTML：

<div class="map_container">
  <div class="map_inner">
    <!-- Images -->
  </div>
  <div class="map_move_layer">
  </div>
</div>

如果我们使用这个CSS：

.map_move_layer {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 1000;
}

我们可以在瓷砖顶部放置一种不可见的div。我们希望tit与窗口或视口的大小相同。

$(".map_move_layer").css({
  width: $(window).width() + "px",
  height: $(window).height() + "px"
});

我们希望然后将draggable应用于此元素，并根据该移动调整map_inner的位置。

测试示例：https://jsfiddle.net/Twisty/xwkddzec/8/

JavaScript代码段 

$(function() {
  var max = {
    top: 12341,
    left: 13000
  };
  var min = {
    top: -12341,
    left: -13000
  }

  $(".map_move_layer").css({
    width: $(window).width() + "px",
    height: $(window).height() + "px"
  }).draggable({
    drag: function(e, ui) {
      var p = ui.position;
      var mPos = $(".map_inner").position();
      var newPos = {
        top: mPos.top + p.top,
        left: mPos.left + p.left
      };
      if ((newPos.top < max.top && newPos.top > min.top) || (newPos.left < max.left && newPos.left > min.left)) {
        $(".map_inner").css({
          top: newPos.top + "px",
          left: newPos.left + "px"
        });
      }
    },
    stop: function(e, ui) {
      $(this).css({
        top: 0,
        left: 0
      });
    }
  });
});

当用户点击并拖动时，它将重新定位地图区域。当它们停止时，叠加层将返回到它的起始位置。您可以根据需要进行调整，以便移动更少或更多。例如：

newPos = {
  top: mPos.top + (p.top * .5),
  left: mPos.left + (p.left * .5)
}

希望这有帮助。

从代码中分叉示例：https://jsfiddle.net/Twisty/wees27gt/

相关问题
最新问题