Bootstrap Modal中的JQuery UI无法正常工作（可拖动和可排序）

时间：2019-02-03 10:45:18

标签： jquery jquery-ui bootstrap-modal

如果模态对话框中屏幕上的可排序主体“ ContentRow”，则一切正常（应该将第一列中的元素拖放到可排序主体中）。如果要在离屏幕可排序的主体不在屏幕上时获取第一列的最后一个元素，则我们根本无法做到这一点（不能将来自第一列的元素拖放到可排序的主体中）。而且，如果这不是在一个模态的对话中，则一切将正常工作。

我不知道这种行为的原因是什么，如何解决？

的Gif：

gif

示例：

$(function () {
	$( ".ContentRow_sortable" ).sortable({
		opacity : 0.35,
		handle: ".drag",
	});

	$( ".ContentRow_draggable" ).draggable({
		connectToSortable: ".ContentRow_sortable",
		helper: "clone",
		handle: ".drag",
		drag: function(e, ui) {
			$(ui.helper).css('width', '80%');
		},
		stop: function( e, ui ) {
			$(ui.helper).css('width', 'auto');
			$(ui.helper).css('height', 'auto');
		},
	});
});
.modal.in .modal-dialog {
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  transform: none !important;
}

label.control-label {
	font-weight: bold;
}

@media (min-width: 768px) {
	.modal .modal-xl {
		width: 90%;
		max-width:1200px;
	}
}

.drag {
    background: #3095b4;
    color: white;
    cursor: pointer;
    padding: 6px;
	font-size: 13px;
    top: 5px;
    right: 5px;
    z-index: 10;
}

.builder_page {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin-left: 0px;
    margin-top: 10px;
    padding: 30px 15px 15px;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    position: relative;
    word-wrap: break-word;
    width: 100%;
}

.builder_page:after {
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #9DA0A4;
    content: attr(data-builder-name) ' ';
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    padding: 3px 7px;
    position: absolute;
    top: -1px;
}

.builder_row {
    position: relative;
}

.builder_row .drag {
    font-size: 13px;
    top: 5px;
	position: absolute;
    right: 5px;
    z-index: 10;
}

.builder_row .row {
    background-color: #F5F5F5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: inset 0 1px 13px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 13px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 13px rgba(0, 0, 0, 0.1);
    border: 1px solid #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    margin: 15px 0;
    position: relative;
    padding: 25px 14px 0;
}

.builder_row .row:before {
    background-color: #F5F5F5;
    border: 1px solid #DDDDDD;
    border-radius: 4px 0 4px 0;
    color: #9DA0A4;
    content: attr(data-builder-name) ' ';
    font-size: 12px;
    font-weight: bold;
    left: -1px;
    line-height: 2;
    padding: 3px 7px;
    position: absolute;
    top: -1px;
}

.builder_column {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 4px 4px 4px 4px;
    margin: 15px 0;
    padding: 39px 19px 24px;
    position: relative;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#editBlockModal">Launch modal</button>

<div class="modal" tabindex="-1" role="dialog" id="editBlockModal" aria-modal="true">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content" id="editModalContent">
			<div class="modal-header">
				<h5 class="modal-title">ContentRow</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body text-center">
				<div class="row">
					<div class="col">
						<p class="h5 mt-2 mb-4 text-center">ContentRow</p>
						<hr>
					</div>
				</div>
				<div class="row">
					<div class="col-12 col-md-4">
			
						<p class="h5 mt-2 mb-2 text-center">Components</p>
						<div class="builder_elems">
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="MainElement"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="ContentRow"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="ContentCell"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="ContentTable"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="ElementButton"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="ElementImage"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="ElementText"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="DatestampModule"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="FiltersModule"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="NavBarModule"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="NavBarModule2"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="NavBarModule3"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="SwitchModule"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="TabsModule"><div class="col builder_column"></div></div></div>
							</div>
							<div class="builder_row ContentRow_draggable draggable">
								<span class="drag badge badge-default">drag</span>
								<div class="view"><div class="row" data-builder-name="ContentElementsContainer"><div class="col builder_column"></div></div></div>
							</div>
						</div>
					</div>
					<div class="col">
						<div class="builder_page ContentRow_builder_page ContentRow_sortable sortable ui-sortable" data-builder-name="ContentRow">
							<div class="builder_row ContentRow_draggable draggable"><span class="drag badge badge-default ">drag</span><div class="view"><div class="row" data-builder-name="ElementImage"><div class="col builder_column"><label class="control-label"></label></div></div></div></div>
							
							<div class="builder_row ContentRow_draggable draggable"><span class="drag badge badge-default ">drag</span><div class="view"><div class="row" data-builder-name="DatestampModule"><div class="col builder_column"><label class="control-label"></label></div></div></div></div>
							
							<div class="builder_row ContentRow_draggable draggable"><span class="drag badge badge-default ">drag</span><div class="view"><div class="row" data-builder-name="NavBarModule"><div class="col builder_column"><label class="control-label"></label></div></div></div></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题