テキストでいっぱいの div があり、その外側に img 要素があります。( http://jsfiddle.net/EjP5y/2/ ) 画像をドラッグ可能にし、div をドロップ可能にしました。ドロップ イベントでは、float:left を持つように画像のスタイルを設定し、いくつかのパディングとマージンを追加してから、それを div に事前に追加します。これにより、div テキストがその周りをラップして div にうまくドロップされます。
$('#clown').draggable();
$('#content').droppable({accept : '#clown', drop : cell_drop});
function cell_drop(e, ui) {
ui.draggable.css({float : 'left',
padding : '10px',
margin : '10px',
top : '0',
left :'0'
})
.prependTo($(this));
}
さて、画像がdivに入ったら、それをドラッグして、画像が動くにつれて画像の周りにdivテキストが流れるようにしたいと思います。画像はドラッグ可能であるため、これを行うことができるように思われますが、Firebug が class='ui-draggable' を持っていることを示しているにもかかわらず、div にドロップされたときに画像がドラッグ可能性を失ったように動作します。
また、 http://jqueryui.com/droppable/によると、ドラッグ可能なものはドロップされた後もドラッグ可能なままである必要があります。
誰かがここで何が起こっているのか理解していますか? 画像を div にドロップした後に画像をドラッグし、移動する画像の周りに動的に div テキストを流すにはどうすればよいですか?
ありがとう