9

OK、それは厄介になっていて、すでに検索されて約5時間試されました、そして私はただ輪になって走っています...

シナリオは簡単です。これはユーザープロファイルのヘッダー画像であり、ある位置にドラッグしてから、画像の一番上の位置をDBに保存できます。

Beetrootのおかげで-Beetrootの「封じ込め：'親'」私はこのコードにたどり着きました。これは実際に私が望むように反応します！1つの大きな問題を除いて。画像は上または下にジャンプします。スムーズなスクロールはありませんか？'parent'を-'parent'に変更すると、うまくスクロールしますが...もちろん封じ込めはもうありません。ヘルプ？：D

JS

$(function(){
    $(".headerimage").css('cursor','s-resize');
    $(".headerimage").draggable({ containment: 'parent', scroll: false, axis: "y",    stop: function(event, ui) {
            var data = "profileheaderposition="+ui.position.top;
            var destination = "/modules/users/profile/save.php";
            get_data(data, destination, function(test){
                notice(test);
            });
        }
    });                 
});

最後になりましたが、ヘッダーは次のように含まれています。

<div class="<?php if ($user->id == $profileuser->id) echo "changer"; ?> ui-corner-all" id="profileheader" style="overflow: hidden; width: 650px; height: 260px; position:relative;">
<?php if($profile->profileheader){
    $size = getimagesize($profile->profileheader);
?>
<img id="" class="draggable headerimage" style="position: absolute; top: <?php echo $profile->profileheaderposition; ?>px;" src="<?php echo $profile->profileheader; ?>" alt="profileheader" width="650" />

私が言ったように、グーグルの時間は何の結果も与えていませんでした-そして私が結果を保存しなければ、それはうまくいくでしょうが、まあ...

- 編集 -

今、私は泣きそうです-.-私はこれとjsfiddleで私を助けるためのツールに報奨金を設定しましたが、私のウェブページにはゲストアカウントがあります： http ：//www.animize.de

そこで、ユーザー名を使用してページにログオンできます：Gast and the pw gast-名前（gast）の右上をクリックすると、プロファイルが表示されます-そこでヘッダー画像を移動できます-もちろん、動作するはずですそれとは別の方法で-ヘルプ:(

4

5 に答える 5

11

このフィドルを試してみてください。

drag画像の現在の位置を確認し、条件がtrueに戻った場合に現在の上部の位置を設定するイベントに、ifステートメントを追加しました。ui.position.topこれにより、ドラッグ可能なイベントがdivの境界に達したときに上部の位置を増減しません。このようにして、divの位置プロパティを保持できます。

于 2012-09-27T21:48:20.920 に答える
3

イワン、

コードを名前付き関数ラッパーに含める必要がある理由を理解するのは困難です。ドラッグ可能性をオン/オフにする必要がない限り、構造体.draggable()で1回呼び出すだけで済みます。$(function(){...});

また、静的データをphpからjavascriptに書き込む必要がある理由を理解するのも困難です。javascript / jQueryがDOMに問い合わせてもそれ自体で検出できないドラッグ可能な画像については何もありません。それでも、なぜこれが必要なのかは明らかではありません。

私はこのようなものを見ることを期待します：

$(function() {
    $(".headerimage").draggable({
        containment: 'parent',
        scroll: false,
        axis: "y",
        stop: function(event, ui) {
            $.ajax(
                url: "/modules/users/profile/save.php",
                data: "profileheaderposition=" + ui.position.top,
                success: function() {
                    //do something here to indicate that the new position has been successfully saved
                }
            );
        }
    });
});
于 2012-09-25T03:48:25.910 に答える
3

これに対する私の解決策については、このフィドルを参照してください。左右のドラッグも処理しました。これは現時点では必要ありませんが、将来、親よりも大きい画像を使用する場合に役立つ可能性があります。あなたの場合、あなたの画像はその親と同じ幅なのでthreshold、左右の境界がヒットすることによってキャンセルされることなく、垂直方向のドラッグを使用できるようにするパラメータを追加しました。

また、いくつかのcssgrabとgrabbingカーソルを追加したので、PDFをドラッグしたときと同様のカーソル効果を得るために、残念ながら、このカーソルのサポートは一部のブラウザー（私のテストではIEとchrome）で多少壊れていますが、Firefoxはそれらを正しく表示しています。

将来のフィドルの壊れたリンクを防ぐために、ここに私のコードを貼り付けます。

HTML：

<br><br><br><br><br><br><br>
<div class="ui-widget-content" style="padding:10px;">

<div class="picturecontainer" style="overflow: hidden; position: relative; width: 650px; height: 150px; border: 1px solid #888;">
    <img style="position: absolute;" class="headerimage ui-corner-all" src="http://www.animize.de/modules/users/profile/images/profileheader/header_3722386791348526090.jpg" />
    </div>

</div>

CSS：

.headerimage {
    cursor:hand;
    cursor:grab;
    cursor:-moz-grab;
    cursor:-webkit-grab;
}
.grabbing {
  cursor:grabbing !important;
  cursor:-moz-grabbing !important;
  cursor:-webkit-grabbing !important;
}

JAVASCRIPT：

var container = $(".picturecontainer");
var childimage = $(".headerimage");

childimage.draggable({  scroll: false, start:function(event,ui) {
                  childimage.addClass('grabbing');
     }, stop: function(event, ui) {
                  childimage.removeClass('grabbing');
     },drag: function(event,ui) {
        //left and right threshold
        //to ease draggin images that have same width as container
        threshold = 20;//pixels
        ltop = childimage.offset().top -1 > container.offset().top;
        lbottom = childimage.offset().top + childimage[0].offsetHeight 
                  <= container.offset().top + container[0].offsetHeight;
        lleft = childimage.offset().left > container.offset().left + threshold;
        lright = childimage.offset().left + childimage[0].offsetWidth <
                container.offset().left + container[0].offsetWidth - threshold;
        if (ltop || lbottom || lleft || lright) {
            $(this).data("draggable").cancel();
            if (ltop) {
                 $(this).offset({ top: $(this).parent().offset().top+1});
            } else if (lbottom) {
                newtop = container.offset().top + container[0].offsetHeight 
                         - childimage[0].offsetHeight;
                $(this).offset({ top: newtop+1});
            } else if (lleft) {
                newleft = container.offset().left;
                $(this).offset({ left: newleft});
            } else if (lright) {                     
                newleft = container.offset().left + container[0].offsetWidth;
                          - childimage[0].offsetWidth;
                $(this).offset({ left: newleft});
            }
         }
     }
}).parent().bind('mouseout',function() {
     childimage.trigger('mouseup');
});
于 2012-09-28T14:38:30.923 に答える
2

私は自分のプロジェクトでこのコードを使用していますが、正常に機能しています。QQpingのソリューションを使用し、画像を左右に移動するように小さな変更を加えました。お役に立てば幸いです。

http://jsfiddle.net/UAgDA/266/

//Moving left and right
if(ui.position.left >= 0)
{
    ui.position.left = 0;
}                                     
else if(ui.position.left <= x1 - x2)
{    
    ui.position.left = x1 - x2;
}

乾杯

于 2014-03-14T01:04:27.450 に答える
1

私はあなたがそれを中に封じ込める必要があるとは思わparentない、さもなければあなたはそれをparent境界の外で上向きにドラッグすることができないだろう。

または、jQueryuiは2つの座標内に包含を提供します。

このコードを試してください、

HTML

<div class="picturecontainer" style="overflow: hidden; position: relative; width: 650px; height: 150px; border: 1px solid #888;">
    <img class="headerimage" src="http://www.animize.de/modules/users/profile/images/profileheader/header_3722386791348526090.jpg" />  
</div>

JS

$(function() {
    var img = $(".headerimage");
    img.css('cursor', 's-resize');
    var x1 = img.parent().width() - img.width();
    var y1 = img.parent().height() - img.height();
    $(".headerimage").draggable({
        containment: [x1,y1,0,0],
        scroll: false,
        axis: "y",
        stop: function(event, ui) {

        }
    });
});​

デモ

于 2012-09-27T05:06:39.447 に答える