jQueryドラッグ可能の初期封じ込めを実施します
-
29-10-2019 - |
質問
写真のWebページの場合、参照画像の上に半透明の長方形をドラッグして、スケーリングされた参照画像で関心のある領域を選択できる画像ビューアを実装しています。選択された領域は、2番目の画像ビューアーに連続的に「ミラーリング」されており、100%倍率の領域を示しています。
私のソリューションではXHTML/CSSとjQueryを使用しており、すでに機能している基本バージョンがありますが、初期化時に問題に苦しんでいますが、解決できません。興味のある領域を設定しました div
これは、jQuery ui draggableを使用してドラッグ可能になります。興味のある領域を画像に制約するために、私は containment
財産。
ただし、最初はDIVが画像の外側に表示されます。興味のある領域をドラッグし始めるとすぐに div
, 、 div
画像の内部へのスナップと封じ込めは、今後適切に施行されます。私が見つけたすべてのサンプルコードは、ネストされた封じ込めを示しています div
S、私の知る限りのイメージから私のケースには適用されません(xhml img
)他の要素を含めることはできません。
ドラッグ可能な関心のある領域を強制する方法はありますか div
Webページが最初にレンダリングされている場合、すでに含まれていますか?
コードから問題を説明するために最小限のコードに抽出しました。以下を参照してください。
ヒントを嬉しく思います。
乾杯、クリスチャン
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#zoom_area").draggable( {
containment: '#the_image'
});
});
</script>
<style type="text/css">
#the_image {
width: 640px;
height: 427px;
}
#zoom_area {
width: 50px;
height: 50px;
background-color: #bbb;
border: 1px dashed black;
opacity: 0.6;
}
</style>
</head>
<body>
<div id="image_viewer">
<img id="the_image" src="img/img1.jpg" alt="reference image" />
</div>
<div id="zoom_area">
</div>
</body>
</html>
解決
これを行うには2つの方法があります。まず、画像タグなしでそれを試すことができます。 #zoom_areaを#image_viewer内に配置し、CSSの背景画像を使用して画像Tageではなく画像を含めてみてください。
HTML:
<div id="the_image">
<div id="zoom_area"></div>
</div>
CSS:
#the_image {
width: 640px;
height: 427px;
background-image:url('img/img1.jpg');
}
#zoom_area {
width: 50px;
height: 50px;
background-color: #bbb;
border: 1px dashed black;
opacity: 0.6;
}
実行中のこの最初の例を参照してください。 http://jsfiddle.net/qutew/
画像タグを使用する必要がある場合は、次のコードを使用できます。
HTML
<div id="image_viewer">
<img id="the_image" src="img/img1.jpg" alt="reference image" />
<div id="zoom_area"></div>
</div>
CSS:
#the_image {
width: 640px;
height: 427px;
}
#zoom_area {
position: absolute;
z-index:10;
top:10px;
width: 50px;
height: 50px;
background-color: #bbb;
border: 1px dashed black;
opacity: 0.6;
}
ここでのトリックは、位置を絶対的に設定し、z-index 10を設定することです。
この2番目の例を参照してください。 http://jsfiddle.net/pbrgb/