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中的内联宽度：

$DOM                     = file_get_contents($link);
    $doc                     = new DOMDocument();
    $doc->preserveWhiteSpace = false;
    $doc->loadHTML($DOM);
    $finder = new DomXPath($doc);

    $founds     = 0;
    $nodes      = $finder->query("//div[contains(@class, 'td-post-content td-pb-padding-side')]");
    foreach ( $nodes as $entrada ) {
        if ( $founds == 0 ) {
                $description = $entrada->nodeValue;
        } $founds++;
    }

编辑：如果您禁用父div <p> <div>的{{1}}，它似乎会设置正确的内联宽度。我认为jquery ui无法获得适当的宽度，所以你必须尝试一下。

Divs在被拖动时自动调整大小（jQuery UI）

1 个答案: