使用 jQuery 和 Bootstrap 3 拖放 div

Question

我需要使用 jQuery 和 Bootstrap 3在仪表板中实现小部件（具有可变尺寸）的拖放，所以我尝试使用jQuery sortable with Bootstrap 3 Grid System。

我面临的问题是，当我在一个空间中移动一个 div 而没有触及其他 div（小部件）时，移动就不会发生，请建议如何解决这个问题。

请找小提琴结果窗口在这里和提琴链接在这里

$(document).ready(function() {
  $('.component-container').sortable({
    cursor: 'move',
    placeholder: 'ui-state-highlight',
    start: function(e, ui) {
      ui.placeholder.width(ui.item.find('.panel').width());
      ui.placeholder.height(ui.item.find('.panel').height());
      ui.placeholder.addClass(ui.item.attr("class"));
    }
  });
});

.margin-top-30 {
  margin-top: 30px;
}

.banner-component,
.important-links-component {
  height: 465px;
}

.training-status-component {
  height: 178px;
}

.learning-activities-component {
  height: 394px;
}

.popular-courses-component,
.resources-component,
.news-and-updates-component {
  height: 438px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="container margin-top-30">
  <div class="row component-container">

    <div class="col-md-9 col-sm-6 col-xs-12 component-section" data-width="col-md-9 col-sm-6 col-xs-12" data-wrapper="bannerwrapper" data-componentname="Banner" data-componenttype="Complex">
      <div class="panel panel-default banner-component">
        <div class="panel-heading">
          <h3>Heading</h3>
        </div>
        <div class="panel-body">
          <h1>Banner</h1>
        </div>
      </div>
    </div>

    <div class="col-md-3 col-sm-6 col-xs-12 component-section" data-width="col-md-3 col-sm-6 col-xs-12" data-wrapper="importantlinkswrapper" data-componentname="ImportantLinks" data-componenttype="Simple">
      <div class="panel panel-default important-links-component">
        <div class="panel-heading">
          <h3>Heading</h3>
        </div>
        <div class="panel-body">
          <h1>Important Links</h1>
        </div>
      </div>
    </div>

    <div class="col-md-12 col-sm-6 col-xs-12 component-section" data-width="col-md-12 col-sm-6 col-xs-12" data-wrapper="trainingstatuswrapper" data-componentname="TrainingStatus" data-componenttype="Mediocre">
      <div class="panel panel-default training-status-component">
        <div class="panel-heading">
          <h3>Heading</h3>
        </div>
        <div class="panel-body">
          <h1>Training Status</h1>
        </div>
      </div>
    </div>

    <div class="col-md-12 col-sm-6 col-xs-12 component-section" data-width="col-md-12 col-sm-6 col-xs-12" data-wrapper="learningactivitieswrapper" data-componentname="LearningActivities" data-componenttype="Simple">
      <div class="panel panel-default learning-activities-component">
        <div class="panel-heading">
          <h3>Heading</h3>
        </div>
        <div class="panel-body">
          <h1>Learning Activities</h1>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12 component-section" data-width="col-md-4 col-sm-6 col-xs-12" data-wrapper="popularcourseswrapper" data-componentname="PopularCourses" data-componenttype="Simple">
      <div class="panel panel-default popular-courses-component">
        <div class="panel-heading">
          <h3>Heading</h3>
        </div>
        <div class="panel-body">
          <h1>Popular Courses</h1>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12 component-section" data-width="col-md-4 col-sm-6 col-xs-12" data-wrapper="resourceswrapper" data-componentname="Resources" data-componenttype="Mediocre">
      <div class="panel panel-default resources-component">
        <div class="panel-heading">
          <h3>Heading</h3>
        </div>
        <div class="panel-body">
          <h1>Resources</h1>
        </div>
      </div>
    </div>

    <div class="col-md-4 col-sm-6 col-xs-12 component-section" data-width="col-md-4 col-sm-6 col-xs-12" data-wrapper="newsandupdateswrapper" data-componentname="NewsAndUpdates" data-componenttype="Simple">
      <div class="panel panel-default news-and-updates-component">
        <div class="panel-heading">
          <h3>Heading</h3>
        </div>
        <div class="panel-body">
          <h1>News And Updates</h1>
        </div>
      </div>
    </div>
  </div>
</div>

我想过使用 jQuery draggable，但似乎我需要自己实现逻辑，所以我尝试了sortable请建议它是否是我想要实现的正确选择。