Question

我正在使用jquery-UI来拖放web UI，但是在执行此操作期间我遇到了一些问题。我正在分享我的代码，这是我的实现的原型和简单示例。

在我的示例中，有三个div元素：拖我，放置此处和让我拖得可行。

现在我解释一下那是什么。实际上我想要拖动元素和将其放入容器但当我将它放在第一次没有放置在我想要的地方的第一个问题时。当我设置相对容器位置时就会到来，因为我希望前0离开0。

让我成为可拖动的div的第二个问题。假设我在容器中删除了多个drag me div元素，然后保存它（在此示例中没有保存选项）然后进行编辑，这样这些保存的元素现在不可拖动但是如果你在代码中看到有相同的类。但我不知道我是如何制造这些可拖的。

所以我对jquery-UI有两个问题，如果有人有任何解决方案并且有关于jquery-UI的专业知识请帮助我。

请参阅我的代码html：

.drag {
    text-align: center;
    margin-top:5px;
    width: 100px;
    height:100px;
    color:white;
    background-color: red;
    margin-bottom: 5px;
    border: 1px solid black;
    }
    .container {
    text-align: center;
    width: 400px;   
    margin-top:5px;
    margin-left: 5%;
    height: 400px;
    color:white;
    background-color: green;
    border:1px solid black;
    }
    .dropped {
    text-align: center;
    width: 100px;
    height:100px;
    color:white;
    background-color: red;
    border: 1px solid black;
    }
    body {
    display: flex;
    }

<div class="drag">Drag me</div>
<div style="position:relative" class="container">drop here !!
<div class="dropped ui-draggable" style="position: absolute; left: 299px; top: 299px; z-index: 1000;">Make me draggable</div>
</div>

Jquery UI：

 $(document).ready(function() {
$('.drag').draggable({
            helper: "clone",
            appendTo:"body",
            revert: "invalid" 
        });
$('.container').droppable({
            accept: ".drag",
            drop: function(e, u) {
            var a = u.helper.clone();
                a.css("z-index", 1000);
                a.appendTo(".container");
                console.log("INFO: Accepted: ", a.attr("class"));
                a.attr('class', 'dropped').draggable({
                containment: ".container"
                });
            }
        });
});

我们如何设置使用jquery删除html元素的正确位置？

0 个答案: