7

ここに私が今持っているものがあります、どこでもstackoverflowを見て、すべての解決策がうまくいきませんでした:(問題は、いくつかの要素などでドラッグ可能でサイズ変更可能なものを使用することです。オーバーフロープロパティを持つコンテナ内の場所である写真。ドラッグ可能で、ページの上部にある画像の上にそのオブジェクトを移動したいのですが、要素は常に上部の画像の下に移動します.Straneの問題は、最初にサイズを変更できる場合、要素を画像の上に移動する前に変更はありません:(もう1つの厄介な問題は、最初にサイズ変更可能にすることです.2番目のオブジェクトがその要素の上に来て、ちょうど重なっていますか？

この 2 つの修正に対して多くの解決策を試しましたが、うまくいきませんでした。ここに私が今持っているものがあります

CSS

#zidomotac{
    width:100%;

}
#myWorkContent{
width:100%;

    overflow-x: scroll;

    white-space: nowrap;
    box-sizing:border-box;
    margin-bottom:20px
    }
.slikezamenjanje{
    width: 100px;
    float:left;
    display: inline-block;
    vertical-align: middle;
}
.slikezamenjanje img{
    max-height: 120px;
    overflow:hidden;
    width: 100%;
}

外部の

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

機能

<script type="text/javascript">
        $(document).ready(function() {
            $('.slikezamenjanje').draggable().resizable({
      aspectRatio: 16 / 9,
    });
        });
    </script>

HTML

<div id="zidomotac"><img src="http://www.vectorimages.org/09/0920100513111825424.jpg"></div>

<div id="myWorkContent">

  <div class="slikezamenjanje"><img src="http://placekitten.com/200/200/"/></div>
<div class="slikezamenjanje"><img src="http://placekitten.com/200/200/"/></div>

</div>

</div>

これは動作中のjsfiddleです http://jsfiddle.net/gorostas/CS93M/ 誰かが解決策を見つけてくれることを願っています

編集済み

たぶん、最初に呼び出しをサイズ変更可能にしてから、ドラッグ可能にすることができますか?

アップデート

このようにドラッグ可能を使用する場合

        $(document).ready(function() {
$(".slikezamenjanje").draggable({
            revert: "invalid" ,
            helper: function(){
                $copy = $(this).clone();
                return $copy;},
            appendTo: 'body',
            scroll: false
        });
        });

要素を移動できますが、戻ってくる問題はありますか?

4

1 に答える 1