拖拽使用jQuery和Bootstrap 3删除div

Question

我需要使用jQuery和Bootstrap 3在仪表板中实现拖放小部件（具有可变维度），因此我尝试使用 jQuery sortable 使用 Bootstrap 3网格系统。

  

我面临的问题是，当我在没有空间的情况下移动div时   触摸更多的其他div（小部件）然后移动不是   发生了，请建议如何解决这个问题。

请找到小提琴结果窗口here和小提琴链接here

＆＃13;

＆＃13;

$(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"));
    }
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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