小编Abd*_*med的帖子

使用 jQuery 和 Bootstrap 3 拖放 div

我需要使用 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"));
    }
  });
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

jquery jquery-ui jquery-ui-sortable jquery-ui-draggable twitter-bootstrap

Abd*_*med

2018 05-07

5
推荐指数

0
解决办法

5860
查看次数