div قابل للتمرير دون تجاوز السعة: تلقائي؟

Question

لدي في تطبيقي قسمين، أحدهما يحتوي على قائمة طويلة من المنتجات التي يمكن سحبها إلى قسم آخر (عربة التسوق).يحتوي قسم المنتج على تجاوز السعة ولكنه يكسر العناصر القابلة للسحب في النموذج الأولي.تعتبر اختراقات النموذج الأولي مزعجة للغاية وغير متوافقة مع جميع المتصفحات.

لذا فإنني أتبع نهجًا مختلفًا، هل من الممكن أن يكون لديك div قابل للتمرير دون استخدام CSS؟ overflow:auto?

Answer 1

وثيريس خاصية المغلق للسيطرة على ذلك.

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

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

Answer 2

ويمكنك استخدام الإطار مع أكبر المحتوى من الإطار الخاص. قد تجعل من الصعب تمرير الأحداث JS بالرغم من ذلك.

Answer 3

إليك ما كتبته لتشغيله ضمن IE 8.0.6 وFirefox 3.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
2. لاحظ فقدان الحاوية للنمط في نهاية 'starteffect'.يوجد المؤشر والعرض ببساطة لإبقاء السحب سهل الاستخدام.

اتمني ان يكون مفيدا.