Question

我有10个元素，应该可以在四个div中拖动（包含）。如果我将所有四个div包裹在包装中，则可以将元素放在两个div之间的中间。我给了图片链接https://i.stack.imgur.com/4T83c.png，供您参考。

是否可以将其放在四格之内？

Answer 1

我不知道我是否理解了这个问题，但是也许这段代码片段可以解决问题

$( function() { 

	// Let the  items be draggable
	$(".draggable").draggable({
	  cancel: "a.ui-icon", // clicking an icon won't initiate dragging
	  revert: "invalid", // when not dropped, the item will revert back to its initial position
	  containment: "document",
	  helper: "clone",
	  cursor: "move"
	});

	// Let the wrap be droppable, accepting the items
	$(".droppable").droppable({
	  accept: ".draggable",
	  classes: {
		"ui-droppable-active": "ui-state-highlight"
	  },
	  drop: function(event, ui) {
		ui.draggable.appendTo(this);
	  }
	});

});

.wrap_left {
	width: 20%;
	padding: 4%;
	border: 1px solid black;
	height: 700px;
	float: left;
}

.draggable {
	width: 100px;
	height: 50px;
	padding: 5px%;
	border: 1px solid red;
	margin: 10px;
}

.wrap_right {
	width: 60%;
	padding: 4%;
	border: 1px solid blue;
	height: 700px;
	float: right;
}

.droppable  {
	width: 40%;
	margin: 4%;
	border: 1px solid blue;
	height: 40%;
	float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="wrap_left">
	<div class="draggable" id="drag_1">Goal 1</div>
	<div class="draggable" id="drag_2">Goal 2</div>
	<div class="draggable" id="drag_3">Goal 3</div>
	<div class="draggable" id="drag_4">Goal 4</div>
	<div class="draggable" id="drag_5">Goal 5</div>
	<div class="draggable" id="drag_6">Goal 6</div>
	<div class="draggable" id="drag_7">Goal 7</div>
	<div class="draggable" id="drag_8">Goal 8</div>
	<div class="draggable" id="drag_9">Goal 9</div>
	<div class="draggable" id="drag_10">Goal 10</div>
</div>

<div class="wrap_right">
	<div class="droppable" id="wrap_right_1"></div>
	<div class="droppable" id="wrap_right_2"></div>
	<div class="droppable" id="wrap_right_3"></div>
	<div class="droppable" id="wrap_right_4"></div>
</div>

可拖动的遏制到四格

1 个答案: