带有Bootstrap行的jQuery UI可排序占位符

Question

我试图使用jQuery UI和Bootstrap行/面板制作一组可拖动的面板。我有一些主要工作的东西，我的问题是拖动面板时占位符的大小不正确。它是整行的大小而不是元素的大小。

＆＃13;

＆＃13;

$('.row').sortable({
	connectWith: ".panel",
	handle: ".panel-heading",
	placeholder: "panel-placeholder"
});

$('.panel').on('mousedown', function(){
	$(this).css( 'cursor', 'move' );
}).on('mouseup', function(){
	$(this).css( 'cursor', 'auto' );
});;

＆＃13;

.panel-placeholder {
	border: 1px dotted black;
	margin: 1em 1em 1em 1em;
	height: 50px;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="container-fluid">
	<div class="row">
		<div class="col-md-3">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">Panel title</h3>
				</div>
				<div class="panel-body">
					Panel content
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">Panel title</h3>
				</div>
				<div class="panel-body">
					Panel content
				</div>
			</div>
		</div>
		<div class="col-md-8">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">Panel title</h3>
				</div>
				<div class="panel-body">
					Panel content
				</div>
			</div>
		</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

$('.col-md-4').sortable({
    connectWith: ".col-md-4",
    handle: ".panel-heading",
    placeholder: "panel-placeholder"
});

JSFiddle：https://jsfiddle.net/zdfb3e0p/8/

有什么想法吗？

Answer 1

如果您希望占位符具有项目的确切尺寸，则可以使用Sortable start事件as described in the API来计算和影响与拖动开始时相同的样式。

一旦你有了placeholder元素的引用，以及事件中的handle元素，你就可以复制每个相关的CSS属性。

此外，为了将网格中的定位保持为原始元素，您必须确保从原始元素中分配正确的col类。我还考虑了一些怪癖，比如默认情况下jQuery占位符被赋予内联边距，虚线边框也占用了一些空间。

$('.row').sortable({
    connectWith: ".panel",
    handle: ".panel-heading",
    placeholder: "panel-placeholder",
    start: function(event, ui){
        var classes = ui.item.attr('class').split(/\s+/);
        for(var x=0; x<classes.length;x++){   
            if (classes[x].indexOf("col")>-1){
            ui.placeholder.addClass(classes[x]);
           }
         }

        ui.placeholder.css({      
          width: ui.item.innerWidth() - 30 + 1, //account for margin and border
          height: ui.item.innerHeight() - 15 + 1, //account for margin and border    
          padding: ui.item.css("padding"), //use original padding
          marginTop: 0 //dispose of the jQuery margin
        });       

    }
  }
});

这是working fiddle example

我确保在所有响应模式中测试它

Answer 2

OpherV解决方案有效。然而，这是一个简化的版本，仍然有效，并试图通过在CSS代码上留下CSS来保持分离关注点。 我试图将js代码本身的填充/边距交互最小化。

这个想法是一样的，我直接从width获得height和.panel，然后按原样复制 col-上的所有类{1}} div。但是边距和填充是通过CSS设置的，以匹配Bootstrap的默认值。

您可以在下面的代码段中找到它，或者在jsfiddle上找到它。 https://jsfiddle.net/zdfb3e0p/16/

$('.row').sortable({
     connectWith: ".panel",
     handle: ".panel-heading",
     placeholder: "panel-placeholder",
     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"));
     }
});

$('.panel').on('mousedown', function(){
  $(this).css( 'cursor', 'move' );
}).on('mouseup', function(){
  $(this).css( 'cursor', 'auto' );
});;

.panel-placeholder {
  border: 1px dotted black;
  border-radius: 4px;
  margin: 0 15px 20px 15px;
  padding: 0;
  height: 50px;
}

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="container-fluid">
	<div class="row">
		<div class="col-md-3">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">Panel title</h3>
				</div>
				<div class="panel-body">
					Panel content
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">Panel title</h3>
				</div>
				<div class="panel-body">
					Panel content
				</div>
			</div>
		</div>
		<div class="col-md-8">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h3 class="panel-title">Panel title</h3>
				</div>
				<div class="panel-body">
					Panel content
				</div>
			</div>
		</div>
	</div>
</div>