Jquery/JqueryUI-將影像保留在父div上

我怎樣才能阻止我的形象（熊）走出 iPhone 模板？

那么如何將影像始終保留在 iPhone 影像中呢？

我應該可以移動它，但影像不應該像這樣溢位 iPhone：

實際上影像消失了，如果可能的話，我想找到一個很好的解決方案來解決這種行為。

提前致謝。

$(".box").resizable({
  ghost: true,
  handles: {
    'nw': '#nwgrip',
    'ne': '#negrip',
    'sw': '#swgrip',
    'se': '#segrip',
    'n': '#ngrip',
    'e': '#egrip',
    's': '#sgrip',
    'w': '#wgrip',
  },
});

$(".box").draggable();

#nwgrip,
#negrip,
#swgrip,
#segrip,
#ngrip,
#egrip,
#sgrip,
#wgrip {
  width: 8px;
  height: 8px;
  background-color: #4c4185;
}

#nwgrip {
  left: -4px;
  top: -4px;
}

#negrip {
  top: -4px;
  right: -4px;
}

#swgrip {
  bottom: -4px;
  left: -4px;
}

#segrip {
  bottom: -4px;
  right: -4px;
}

#ngrip {
  top: -4px;
  left: calc(50% - 4px);
}

#sgrip {
  bottom: -4px;
  left: calc(50% - 4px);
}

#wgrip {
  left: -4px;
  top: calc(50% - 4px);
}

#egrip {
  right: -4px;
  top: calc(50% - 4px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>





<section id="page-content">
  <div class="container text-center">
    <div style="width: 300px; height: 531px; overflow: hidden; margin: auto auto;">
      <div class="box" style="width: 300px; height:531px; background: url('https://media.gettyimages.com/photos/brown-bear-picture-id173617853?s=2048x2048'); background-size: cover; background-repeat: no-repeat; position: absolute; z-index: 1; background-position: 50% 50%; cursor: move;">
        <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
        <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
        <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
        <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
        <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
        <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
        <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
        <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
      </div>
      <img src="https://i.ibb.co/L8hb78X/Final-Apple-i-Phone-13-Skin-Cutfile-Full-Wrap-Antenna-Display.png" width="300" height="531" style="z-index: 2; position: relative; pointer-events: none; user-select: none;">
    </div>
  </div>
</section>

uj5u.com熱心網友回復：

只需添加position:relative到容器中，這將overflow:hidden通過包含position:absolute熊來啟動它。

顯示代碼片段

$(".box").resizable({
  ghost: true,
  handles: {
    'nw': '#nwgrip',
    'ne': '#negrip',
    'sw': '#swgrip',
    'se': '#segrip',
    'n': '#ngrip',
    'e': '#egrip',
    's': '#sgrip',
    'w': '#wgrip',
  },
});

$(".box").draggable();

#nwgrip,
#negrip,
#swgrip,
#segrip,
#ngrip,
#egrip,
#sgrip,
#wgrip {
  width: 8px;
  height: 8px;
  background-color: #4c4185;
}

#nwgrip {
  left: -4px;
  top: -4px;
}

#negrip {
  top: -4px;
  right: -4px;
}

#swgrip {
  bottom: -4px;
  left: -4px;
}

#segrip {
  bottom: -4px;
  right: -4px;
}

#ngrip {
  top: -4px;
  left: calc(50% - 4px);
}

#sgrip {
  bottom: -4px;
  left: calc(50% - 4px);
}

#wgrip {
  left: -4px;
  top: calc(50% - 4px);
}

#egrip {
  right: -4px;
  top: calc(50% - 4px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>





<section id="page-content">
  <div class="container text-center">
    <div style="width: 300px; height: 531px; overflow: hidden; margin: auto auto; position: relative; ">
      <div class="box" style="width: 300px; height:531px; background: url('https://media.gettyimages.com/photos/brown-bear-picture-id173617853?s=2048x2048'); background-size: cover; background-repeat: no-repeat; position: absolute; z-index: 1; background-position: 50% 50%; cursor: move;">
        <div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div>
        <div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div>
        <div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div>
        <div class="ui-resizable-handle ui-resizable-se" id="segrip"></div>
        <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
        <div class="ui-resizable-handle ui-resizable-s" id="sgrip"></div>
        <div class="ui-resizable-handle ui-resizable-e" id="egrip"></div>
        <div class="ui-resizable-handle ui-resizable-w" id="wgrip"></div>
      </div>
      <img src="https://i.ibb.co/L8hb78X/Final-Apple-i-Phone-13-Skin-Cutfile-Full-Wrap-Antenna-Display.png" width="300" height="531" style="z-index: 2; position: relative; pointer-events: none; user-select: none;">
    </div>
  </div>
</section>

作為替代方案，jQuery UI 也有一個選項來約束可拖動物件。見https://jqueryui.com/draggable/#constrain-movement

標籤：html jQuery css jQuery-ui

上一篇：如何折疊導航欄onclick(bootstrap5)

下一篇：如何沿寬度和高度重疊元素，為每個元素取最小值？