javascript - オーバーフローのないスクロール可能な div:auto?

Question

私のアプリには 2 つの div があり、1 つには別の div (ショッピング カート) にドラッグできる製品の長いリストがあります。製品の div にはオーバーフローがありますが、プロトタイプのドラッグ可能な要素が壊れています。プロトタイプのハックは非常に邪魔で、すべてのブラウザーと互換性があるわけではありません。

だから私は別のアプローチをとっています.CSSを使わずにスクロール可能なdivを持つことは可能overflow:autoですか?

Answer 1

それを制御する css プロパティがあります。

<div style="width:100px;height:100px;overflow:scroll">
</div>

http://www.w3schools.com/Css/pr_pos_overflow.asp

Answer 2

ウィンドウより大きい内容のフレームを使用できます。ただし、JS イベントを渡すのが難しくなる場合があります。

Answer 3

IE8.0.6とFirefox3.6.3で実行するために私が書いたものは次のとおりです。

"width:100px;scrollable:auto"コンテナ内の要素（境界線付き）をドラッグ可能にします。

function makeDraggable(container,tag) {

    if(!container || !tag) { return false; }
    $(container).select(tag).each( function(o) {
      new Draggable(o,{
        starteffect: function(e){makeDragVisible(container,e);},
        endeffect: function(e){e.setStyle({'position':'','width':'','cursor':''});},
        zindex: 1000
        // , revert: ... // the other options
      });
    });

}

function makeDragVisible(container,element) {

    if(!container || !element) { return false; }
    var i=$(container).getStyle('width');
    i=i.replace('px','');
    i=Math.round(i-20)+'px';
    element.setStyle({'width':i,'z-index':1000,'position':'absolute','cursor':'move'});
    // 
    $(container).setStyle({});

}

重要な注意事項：

1. z-indexが繰り返されます
2. の終わりにコンテナのスタイルが失われていることに注意して'starteffect'ください。カーソルと幅は、ドラッグをユーザーフレンドリーに保つためにあります。

お役に立てば幸いです。