خلل في السحب قابل للفرز حسب المقبض في jquery ui

StackOverflow https://stackoverflow.com/questions/1237157

سؤال

المشكلة التي لدي أنها كلما حاولت السحب والإفلات مع مقبض، في عملية السحب والإفلات، لن يبقى نص الجسم محاذاة بالنص، والذي يتضح في التعليمات البرمجية المرفقة في النهاية.

السبب في أنني أفضل عدم وضع المقبض في <p> العلامات، كأمثلة على برامج الويب، هي أن أرغب في السماح للمستخدم في وضع تحرير الأشياء بين علامات P، وبالتالي لا أريد أن أذهب والقيام بالكثير من المعالجة السابقة (قد أضيف المزيد من الأشياء حول علامات P) قبل عرض النموذج.

إذا كان أي شخص يستطيع إلقاء بعض الضوء على هذه المسألة، فسيكون موضع تقدير كبير!

الرمز، باستخدام Google CDN، لذلك يجب أن تعمل فقط:

<head>
    <style type="text/css">
    #container{
        width:500;
    }
    .handle{
        float:left;
    }
    .
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#container').sortable({
            revert:true,
            handle:'.handle',
        });
    });
    </script>
</head>
<div id="container">
<div class="c"><span class="handle">HH</span><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>

<div class="c"><span class="handle">HH</span><p>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>
</div>
هل كانت مفيدة؟

المحلول

المشكلة هي أنه عند سحب DIV للقيام بالفرز، قم بتعيين JQuery بشكل فعال draggable (وبالتالي div.c في قضيتك) لتكون في وضع مطلقا (لذلك يمكن أن تحريكها حول الشاشة). لست متأكدا من css css الدقيق (ربما شخص أكثر حكمة مما أستطيع أن أشرح أكثر اكتمالا)، ولكن أساسا الخاص بك .handle بأعمال بعض الشيء بغرابة جنبا إلى جنب مع p عندما داخل حاوية وضعت تماما. الهوامش على p يبدو الآن أن يتم تعيينها من داخل DIV بدلا من دمجها معهم، في حين span لا يزال يطفو إلى الجزء العلوي الأيسر من DIV.

حل واحد هو إضافة نفس الهامش العلوي إلى span كما هو ل p, ، ولكن فقط أثناء السحب. بمعنى آخر، أضف CSS التالية (أعتقد 1em يجب أن يكون الهامش الافتراضي المطبق على الجزء العلوي من p):

.ui-sortable-helper .handle {
    margin-top: 1em;
}

إذا كنت مهتما بإزالة المزيد في CSS، فقم بإضافة ما يلي إلى رمزك أعلاه وسيقوم بإعادة إنتاج المشكلة دون الحاجة إلى الأنابيب المعنية:

.c { width: 500px; height: 40px; position: absolute; }
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top