Gridstack.js: مقبض السحب المخصص

تم إنشاؤها على ٢٤ مارس ٢٠١٥ · 3تعليقات · مصدر: gridstack/gridstack.js

هل هناك أي مثال لاستخدام مقبض السحب المخصص؟
أحاول جعل العناصر قابلة للسحب فقط باستخدام رأس لوحة (وليس الجسم بالكامل) - جرب الكود أدناه مع العديد من التركيبات الممكنة ، لكن لم ينجح

    <div class="grid-stack">
        <div class="grid-stack-item"
                 data-gs-x="0" data-gs-y="0"
                 data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content panel panel-default">
                <div class="panel-heading clearfix">
                    <span class="panel-title pull-left"><span class="glyphicon glyphicon-asterisk"></span> <span class="panel-title-text">Featuring</span></span>
                </div>
                <div class="panel-body ">
                    <ul class="list-group">
                        <li class="list-group-item">a</li>
                        <li class="list-group-item">v</li>
                    </ul>
                </div>
            </div>
        </div>
    </div

كود js:

    var options = {
        cell_height: 80,
        vertical_margin: 10,
        animate: true,
        handle:  ??? 
    };
    this.$('.grid-stack').gridstack(options);

جربت handle:'.panel' ، handle:'panel-heading' وحتى بدون مقبض. وحاولت أيضًا إزالة فئة grid-stack-item-content - ولكن في جميع الحالات كانت النتيجة either the whole thing moves or nothing moves at all .

كيف تجعل المادة متحركة فقط برأسها؟

مصدر

KrishnaPG

التعليق الأكثر فائدة

مرحبًا كريشنا ،

يبدو أن المشكلة في خياراتك var.

إذا ألقيت نظرة على رمز المكتبة ، يمكنك أن ترى ، بدءًا من السطر 379 ، الخيارات الافتراضية وطريقة تنظيمها.

يجب أن يكون مقبض الحاوية المخصصة القابلة للسحب خاصية فرعية للخاصية القابلة للسحب ؛ يجب أن يبدو رمز js الخاص بك مشابهًا لما يلي:

var options = {
    cell_height: 80,
    vertical_margin: 10,
    animate: true,
    draggable: {
        handle: '.panel-heading',
    }
};
this.$('.grid-stack').gridstack(options);

indriemarius في ٢٤ مارس ٢٠١٥

👍11 🚀1 ❤1

ال 3 كومينتر

مرحبًا كريشنا ،

يبدو أن المشكلة في خياراتك var.

إذا ألقيت نظرة على رمز المكتبة ، يمكنك أن ترى ، بدءًا من السطر 379 ، الخيارات الافتراضية وطريقة تنظيمها.

var options = {
    cell_height: 80,
    vertical_margin: 10,
    animate: true,
    draggable: {
        handle: '.panel-heading',
    }
};
this.$('.grid-stack').gridstack(options);

indriemarius في ٢٤ مارس ٢٠١٥

👍11 🚀1 ❤1

رائع - يعمل مثل السحر - أنت رائع. كنت أركلها طوال اليوم ، وإليك إجابتك ، وهي تعمل فقط :) مذهل.

KrishnaPG في ٢٥ مارس ٢٠١٥

لقد ساعد حقا الرجال ، شكرا.