※ ChatGPTを利用し、要約された質問です（原文：画像を並べ替える・・・）
画像を並べ替える方法と画像入れ替え時のぶれ問題について
このQ&Aのポイント
ドラックアンドドロップで画像を入れ替える方法と、右から左に画像を入れ替える際に発生するぶれ問題について解説します。
具体的なコード例を示しながら、横に画像を入れ替えるためのスクリプトの実装方法を詳しく説明します。
また、右から左に画像を入れ替える際に生じるぶれ問題を解消するための方法も提案します。
質問させていただきます。
下記のようなコードでページを作成しています。
この中でドラックアンドドロップで画像を入れ替える処理を
行っています。
横に入れ替えが出来るようになっているのですが、
右から左に画像を入れ替えようとすると、画像がぶれて、
画像の入れ替えがやりにくい状態になってしまいます。
わかる方いらっしゃいましたらご助言頂けないでしょうか。
http://journal.mycom.co.jp/series/scriptaculous/004/index.html
<!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">
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<title>データ</title>
<LINK href="css/detail_style.css" type="text/css" rel=stylesheet>
<link rel="stylesheet" type="text/css" href="jslib/demo.css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="jslib/highslide/highslide.css" />
<script type="text/javascript" src="jslib/prototype.js"></script>
<script type="text/javascript" src="jslib/scriptaculous.js?load=effects,dragdrop"></script>
<script type="text/javascript" src="jslib/demo.js"></script>
<script type="text/javascript" src="jslib/highslide/highslide-with-gallery.js"></script>
</head>
<body>
<form name = "imagepic">
<dl id="gloop1">
<dt id="id_2336:8"><div class="highslide-gallery"><table><tr><td>xxxｘ</td><td><input type="checkbox" id ="room" name="room" value="2336:8"></td></tr><tr><td rowspan="2"><a id="thumb1" href="images/noimages.gif" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"></td></tr></table><img src="images/snoimages.gif"></a><div class="highslide-caption"><a href="#" onclick="test(2)"><img src="images/search_detail.gif" alt=""></a><br></div></div></dt><dt id="id_2349:4"><div class="highslide-gallery"><table><tr><td>xxxx</td><td><input type="checkbox" id ="room" name="room" value="2349:4"></td></tr><tr><td rowspan="2"><a id="thumb1" href="images/noimages.gif" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"></td></tr></table><img src="images/snoimages.gif"></a><div class="highslide-caption"><a href="#" onclick="test(2)"><img src="images/search_detail.gif" alt=""></a><br></div></div></dt><dt id="id_2359,2:"><div class="highslide-gallery"><table><tr><td>xxxx</td><td><input type="checkbox" id ="room" name="room" value="2359,2:"></td></tr><tr><td rowspan="2"><a id="thumb1" href="images/noimages.gif" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )"></td></tr></table><img src="images/snoimages.gif"></a><div class="highslide-caption"><a href="#" onclick="test(2)"><img src="images/search_detail.gif" alt=""></a><br></div></div></dt>
</dl>
</form>
</body>
css↓↓↓↓
h1 { font-size: 1.5em; }
dl {
position: absolute; top: 11em; padding: 0;
list-style-type: none; width: 100em;
margin-left: 0;
padding-left: 0.2em;
background: #ddd;
}
dt {
float: left;
cursor: move;
margin: 1.3em;
padding: 1.2em;
background: #ff9;
border: 1px solid gray;
}
dl.empty { height: 2em; border: 1px solid silver; background: #ddd; }
#gloop1 { left: 2em; }
#gloop1 { top: 6em; }
#gloop1 dl { background: #ff9; }
補足
回答ありがとうございます。 ということは、CSSの位置の問題ではなく javascriptの問題という事ですね？ >左端に触れた時 これはcssのdtのmargin:の設定を限りなく0に近くした からだと思います。最初はこれの値を上手く設定すればいける かなと思いcssの設定を出したのですが、自分でも調べてみると あまり関係なさそうでした ちなみに下がジャバスクリプトの処理（というかライブラリなんですが・・・） document.observe('dom:loaded', function() { var options = { tag:'dt', overlap : 'horizontal', constraint: false, containment: ['gloop1'], dropOnEmpty: true, onUpdate: function(list) { var methodStart = list.down('dt') ? 'remove' : 'add'; list[methodStart + 'ClassName']('empty'); } }; Sortable.create('gloop1', options); }); Sortable.createのoptionsの設定の仕方になってくるのでしょうか？