Question

我目前正在使用jQuery-UI的可拖动交互，我正在尝试将列表项从侧栏拖到主面板，但是，拖动的项目被剪切，侧边栏呈现水平滚动条尽管有溢出-x ：可见集。如何保持侧边栏不会创建滚动条和可拖动元素被剪裁？

在拖动之前：

拖动后：

代码：

.sidebar {
  position: fixed;
  top: 51px;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  overflow-x: visible;
  background-color: #f5f5f5;
  white-space: nowrap;
  border-right: 1px solid #eee;
  padding-left: 30px;
  padding-right: 30px;
}


/* Sidebar navigation */
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 20px;
  margin-left: -20px;
}

<div class="common">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="draggable">
              <a href="#" class="list-group-item">
                <span class="badge">dasdsa</span>
                <span class="badge">dsad</span>
                <h4>
                 dsad
                 <br /><small>dsadsa</small>
                 <br /><small>dsadsa</small>
                </h4>
              </a>
            </li>
          </ul>
        </div>

        
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          MAIN PANEL
        </div>
      </div>
    </div>
    </div>

Answer 1

这个片段似乎不起作用所以这里是一个小提琴http://jsfiddle.net/RachGal/51w1c357/而不是添加位置：继承我添加了refreshpositions：true（其余的!!!）

＆＃13;

int

＆＃13;

@JsonAdapter(CustomTypeAdapter.class)
class CustomType { /* blah blah */ }

private CustomType field;

public int getField() {
    return field.getValue();
}

public void setField(int field) {
    this.field = new CustomType(field);
}

＆＃13;

$(".draggable").draggable();
var draggableArguments={
     revert: 'invalid',
     helper:'clone',
     appendTo: '#drophere',
     refreshPositions: true,
     containment: 'DOM',
     zIndex: 1500,
     addClasses: false
};

$('.group').draggable(draggableArguments);
$('.group').droppable();

$(".nav-sidebar").droppable({
    tolerance: "intersect",
    accept: ".group",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        $(".nav-sidebar").append($(ui.draggable));
    }
});

$('#drophere').droppable({
    tolerance: "intersect",
    accept: ".group",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $('#drophere').append($(ui.draggable));
    }
});

＆＃13;

使用overflow-x：visible仍显示滚动条

1 个答案: