سحب وإسقاط divs

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.component-container').sortable({
  cursor: 'move',
  items: ".component-section",
  placeholder: 'ui-state-highlight',
  start: function(e, ui) {
    ui.placeholder.width(ui.item.find('.component-section').width());
    ui.placeholder.height(ui.item.find('.component-section').height());
    ui.placeholder.addClass(ui.item.attr("class"));
  }
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fila" class="row center expandir component-container" style="text-align: center;">
  <div class="col-md-6 col-xs-12" id="firstCol">
    <div class="col-md-12 col-sm-12 component-section" id="panel1">
    </div>
    <div class="col-md-12 col-sm-12 component-section" id="panel3">
    </div>
  </div>
  <div class="col-md-6 col-xs-12" id="secondCol">
    <div class="col-md-12 col-sm-12 component-section" id="panel2">
    </div>
  </div>
</div>
</div> </div>

لقد جعلت من ذلك يمكن أن يكون السحب والإسقاط. ولكن لديه خطأ ، يسمح لي بإسقاط ثلاثة divs في نفس العمود ، لكنه لا يسمح لي بإعادته في العمود الفارغ. هل تعرف كيف يمكنني أن أجعله قادرا على وضع أحد هذه div في الأعمدة الفارغة؟

شكر

0
شكرًا على تصحيحك ، ومع ذلك لا يصلح الخطأ.
وأضاف المؤلف Borja, مصدر
col-xs هو col في Bootstrap 4!
وأضاف المؤلف Klooven, مصدر

1 إجابة

عند سحب/إسقاط قسم مكون ، يمكنك التحقق من أولينوكول وأولدي كول باستخدام أطفال دوم. إذا كان الرقم 2 (في حالتك معطى) ، قم بإلغاء عملية الإفلات (يمكن القيام بذلك باستخدام مكون إضافي قابل للفك/السحب).

تحرير 1://مع رمز plunker قمت بإضافة

$('.component-container').sortable({
      connectWith: '.component-container', //Add this
      cursor: 'move',
      items: ".component-section",
      placeholder: 'ui-state-highlight',
      start: function(e, ui) {
        ui.placeholder.width(ui.item.find('.component-section').width());
        ui.placeholder.height(ui.item.find('.component-section').height());
        ui.placeholder.addClass(ui.item.attr("class"));
      }
    });
});

من html ، قم بإزالة فئة .component-container من الموضع الحالي وأضفها إلى firstCol و secondCol div

<div id="fila" class="row center expandir " style="text-align: center;">  - removed component-container from here


<div class="col-md-6 col-xs-12 component-container" id="firstCol">  - added component-container here

<div class="col-md-6 col-xs-12 component-container" id="secondCol">  - added component-container here
0
وأضاف
شكرا ، لقد قمت بتحرير السؤال.
وأضاف المؤلف Borja, مصدر
لقد حاولت ولكن لا أستطيع ، لا يعمل ، أنا آسف
وأضاف المؤلف Borja, مصدر
هذا هو أقصى ما أستطيع تحقيقه plnkr.co/edit/VTGq6hUFlOX3yAlcEJ5T؟p=preview
وأضاف المؤلف Borja, مصدر
أنا ممتن حقا ، وهو يعمل مثالية فقط. شكرا جزيلا وأطيب التمنيات
وأضاف المؤلف Borja, مصدر
يمكنك إنشاء مثال عملي في عزف/الغطاس؟
وأضاف المؤلف Arvind Muthuraman, مصدر
حاول إعطاء min-height إلى firstCol و secondCol؟
وأضاف المؤلف Arvind Muthuraman, مصدر
لقد قمت بتحديث الجواب. يجب أن تعمل بشكل جيد.
وأضاف المؤلف Arvind Muthuraman, مصدر
سعيد ساعد! من فضلك ، النظر في قبول جوابي.
وأضاف المؤلف Arvind Muthuraman, مصدر