Draggable сдерживание до четырех дел

Question

У меня есть 10 элементов, которые можно перетаскивать в четыре деления (сдерживание).Если я оберну все четыре элемента 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>