JQUERY：在图像上创建一个可排序列表？

Question

所以我在两张图片之间有一个单词库。我希望用户能够将单词库中的单词拖到图像上，这样它们就可以排序。所以我使用了拖动和排序。我可以使用方框来做到这一点，但是当我将文字拖到图像上时，它只是隐藏在图像后面。我不确定它是否放在任何地方。

请帮忙！

sortable5();

function sortable5() {
	$(".words1").draggable({
		helper: "clone",
		connectToSortable: ".sortConnect",
		start: function (event, ui) {
			ui.helper.css("list-style", "none");
		},
		stop: function (event, ui) {
			ui.helper.css("font-size", "10px");
			ui.helper.css("list-style", "none");
			ui.helper.css("display", "inline");
			ui.helper.css("padding", "1px")
		}
	});
	$(".words1,.sortConnect").sortable({
		connectWith: "#wordBank,.sortConnect",
		receive: function (event, ui) {
			ui.item.toggleClass("highlight");
			var currentListID = this.id; //where the item is dropped
			var originatedID = ui.sender[0].id; //where item came from
			var itemContent = ui.item[0].innerHTML; //which item it is (or ui.item[0].id)
			var currentListLength = this.children.length;

			//if current item is dropped in the word bank, remove the list-inline-item

			if (!ui.helper[0].classList.contains("list-inline-item")) {
				ui.helper[0].classList.add("list-inline-item");
			}
		}
	});
	$().disableSelection();
}

.bank 
{
	margin-top: 50%;
	padding-top: 20px;
	padding-bottom: 20px;
	position: relative;
	background: #EFD8D4;
	border-radius: 50% / 10%;
	color: black;
	text-align: center;
	text-indent: .1em;	
	border: 4px solid black;
	min-width: 100%;
	max-height: 100%;
}

<div class="row justify-content-center">
	<div class="col-12 fillTop"></div>
	<div class="col-4 sortConnect">
		<img class="img-fluid images sortConnect" src="IMAGES/mirror.png">
	</div>
	<div class="col-2 justify-content-md-center">
		<ul class="col-2 bank" id="wordBank">
			<li class="words1">Word 1</li>
			<li class="words1">Word 2</li>
			<li class="words1">Word 3</li>
			<li class="words1">Word 4</li>
		</ul>
	</div>
	<div class="col-4 sortConnect">
			<img class="img-fluid images sortConnect" src="IMAGES/mirror.png">
	</div>
</div>

Answer 1

不要使用'img'标签作为容器，img应该没有子节点并且仅用作图像。使用div并为其添加背景图像。您可以为每个div添加不同的类，以便为所有容器创建不同的图像。

sortable5();

function sortable5() {
    $(".words1").draggable({
        helper: "clone",
        connectToSortable: ".sortConnect",
        start: function (event, ui) {
            ui.helper.css("list-style", "none");
        },
        stop: function (event, ui) {
            ui.helper.css("font-size", "10px");
            ui.helper.css("list-style", "none");
            ui.helper.css("display", "inline");
            ui.helper.css("padding", "1px")
        }
    });
    $(".words1,.sortConnect").sortable({
        connectWith: "#wordBank,.sortConnect",
        receive: function (event, ui) {
            ui.item.toggleClass("highlight");
            var currentListID = this.id; //where the item is dropped
            var originatedID = ui.sender[0].id; //where item came from
            var itemContent = ui.item[0].innerHTML; //which item it is (or ui.item[0].id)
            var currentListLength = this.children.length;

            //if current item is dropped in the word bank, remove the list-inline-item

            if (!ui.helper[0].classList.contains("list-inline-item")) {
                ui.helper[0].classList.add("list-inline-item");
            }
        }
    });
    $().disableSelection();
}

.bank {
    margin-top: 50%;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    background: #EFD8D4;
    border-radius: 50% / 10%;
    color: black;
    text-align: center;
    text-indent: .1em;
    border: 4px solid black;
    min-width: 100%;
    max-height: 100%;
}

.img-1 {
    background-image: url("http://via.placeholder.com/350x150");
    width: 350px;
    height: 150px;
    background-size: cover;
    background-repeat: no-repeat;
}

.img-2 {
    background-image: url("http://via.placeholder.com/350x150");
    width: 350px;
    height: 150px;
    background-size: cover;
    background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="row justify-content-center">
    <div class="col-12 fillTop"></div>
    <div class="col-4 sortConnect">
        <div class="img-fluid images sortConnect img-2">
        </div>
        <div class="col-2 justify-content-md-center">
            <ul class="col-2 bank" id="wordBank">
                <li class="words1">Word 1</li>
                <li class="words1">Word 2</li>
                <li class="words1">Word 3</li>
                <li class="words1">Word 4</li>
            </ul>
        </div>
        <div class="col-4 sortConnect">
            <div class="img-fluid images sortConnect img-2">
            </div>
        </div>
    </div>
</div>