javascript - Div 在被拖动时自动调整大小(jQuery UI)

Question

一旦我单击 div 开始拖动它们，它们会自动以一种似乎不合逻辑的方式调整大小。

我认为 jquery UI 在拖动元素时会向元素添加内联样式，但我不确定为什么以及如何阻止它？

这是一个plnk;

http://plnkr.co/edit/UoyF37w7eDFojtishqZE?p=preview

CSS:

#content {
  width: 1000px;
  height: 400px;
  text-align: center;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}

#itemArea {
  position: relative;
  width: 85%;
  height: 50%;
  top: 10%;
  left: 10%;
  border-radius: 20px;
  float: left;
}

#row {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.itemContainer {
  display: block;
  height: 100%;
  width: 33%;
}

.candle {
  position: relative;
  top: 0;
  width: 5px;
  height: 40px;
  border-width: 0px 0px 5px 5px;
  border-style: solid;
  border-color: transparent rgb(210, 211, 213);
  left: 50%;
  opacity: 1;
}

/*#barContainer {
  position: absolute;
  bottom: -20px;
  left: 5%;
  width: 90%;
  height:12px;
}*/
#ratingBar {
  position:absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: url("http://i.imgur.com/vD8ypdW.jpg");
  background-repeat: no-repeat;
  background-position: bottom center;


}

#ratingBar img {
  height: 100%;
  width: 100%;
}

.item1 {
  display: block;
  height: 80%;
  width: 100%;
  background-color: red;
  z-index: 1;
}

.item2 {
  display: block;
  height: 80%;
  width: 100%;
  background-color: blue;
  z-index: 1;
}

.item3 {
  display: block;
  height: 80%;
  width: 100%;
  background-color: green;
  z-index: 1;
}

.item4 {
  display: block;
  height: 80%;
  width: 100%;
  background-color: orange;
  z-index: 1;
}

.item5 {
  display: block;
  height: 80%;
  width: 100%;
  background-color: cyan;
  z-index: 1;
}

.item6 {
  display: block;
  height: 80%;
  width: 100%;
  background-color: lightGreen;
  z-index: 1;
}

.itemContainer:hover {
  z-index: 2;
}

JS:

$(init);

function init() {
  var range = 100;
  var sliderDiv = $('#ratingBar');

  sliderDiv.slider({
    min: 0,
    max: range,
  });

  var left = sliderDiv.offset().left;
  var right = left + sliderDiv.width();
  var top = sliderDiv.offset().top;
  var bottom = top + sliderDiv.height();
  var height = $(".itemContainer").height();
  var width = $(".itemContainer").width();
  var divs = '.itemContainer'
  $(divs).draggable({
    containment: [left, 0, right - width, (bottom-30) - height],
    cursor: 'move',
    snap: '#ratingBar',
    revert: function(event, ui) {
      $(this).data("uiDraggable").originalPosition = {
        top: 0,
        left: 0
      };
      return !event;
    }
  });
  var position = sliderDiv.position(),
    sliderWidth = sliderDiv.width(),
    minX = position.left,
    maxX = minX + sliderWidth,
    tickSize = sliderWidth / range;
  $('#ratingBar').droppable({
    tolerance: 'touch',
    drop: function(e, ui) {
      var finalMidPosition = $(ui.draggable).position().left + Math.round($(divs).width() / 2);
      if (finalMidPosition >= minX && finalMidPosition <= maxX) {
        var val = Math.round((finalMidPosition - minX) / tickSize);
        sliderDiv.slider("value", val);
        $(".slider-value",ui.draggable).html(val);
        $("#text1").val($(".item1 .slider-value").html())
        $("#text2").val($(".item2 .slider-value").html())
        $("#text3").val($(".item3 .slider-value").html())
        $("#text4").val($(".item4 .slider-value").html())
        $("#text5").val($(".item5 .slider-value").html())
        $("#text6").val($(".item6 .slider-value").html())
      }
    }
  });
  $(".slider-value").html(sliderDiv.slider('value'));
}

希望这是一个简单的问题，

谢谢大家

Answer 1

是的，某些东西肯定会添加内联样式，但我不知道为什么。

作为临时解决方法，您可以在您的 css 中覆盖内联宽度:

.itemContainer {
  width: 33% !important;
}

编辑:如果禁用父 div #row 的 display:flex，它似乎会放置适当的行内宽度。我认为 jquery ui 无法获得合适的宽度，因此您必须尝试一下。