Question

我有一个html结构：

<!DOCTYPE html>
<html lang="en">
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
        <script type="text/javascript" src="skrypt.js"></script>
    </head>
    <body  style="background-color:#FF8787">
        <div class="box">
            <br/>
            <div id="container"> 
                <div class="droppable object"></div>
                <div class="droppable object"></div>
                <div class="droppable object"></div>
                <div class="droppable object"></div>
                <div class="droppable object"></div>
                <div class="droppable object"></div>
                <div class="droppable object"></div>
                <div class="droppable object"></div>
                <div class="droppable object"></div>
            </div>
            <br/>
            <div id="draggable-container">
                <div class="draggable" style="background-color: blue"></div>
                <div class="draggable" style="background-color: red"></div>
                <div class="draggable" style="background-color: green"></div>
            </div>
        </div>
    </body>
</html>

使用css文件（stylesheet.css）：

#container {
    height: 300px;
    width:300px;
    background-color: #08457e;
    margin: auto;
}
.object {
    height: 60px;
    width: 60px;
    background-color: #00AFB8;
    display:inline-block;
    margin: 18.5px 18.5px 18.5px 18.5px;
}

.draggable {
    height: 60px;
    width: 60px;
    display: inline-block;
    margin: auto;
}

.task {
    height: 30px;
}

使用jQuery draggable，droppable和resizable小部件，我想制作＆＃34; .draggable＆＃34; div不止一次使用。似乎在第一次使用（拖动）之后，他们失去了他们的ui-draggable类，我相信这是问题所在。新创建的对象也是如此。如果我正确地删除了一个可拖动的div，那么新创建的＆＃34; .task＆＃34; div可以调整大小但不能拖动。这是jQuery代码：

$(document).ready(function(){
    $('.draggable').draggable({
        snapMode: 'inner',
        helper: myHelper
    });
    $('.droppable').droppable({
        accept: '.draggable, .task',
        drop: ondrop
    });
});

function myHelper(event, ui){
    return $(this).clone();
}

function ondrop(event,ui){
    var object = ui.draggable.clone().removeClass('draggable').addClass('task');
    makeDraggable(object);
    makeResizable(object);
    $(this).append(object);
}

function makeResizable(element){
    $(element).resizable();
}

function makeDraggable(element){
    $(element).draggable({
        helper: function(){ 
          return $(this).clone();
        },        
        zIndex: 10
    });
}

Answer 1

我不太明白为什么你的代码不能正常工作，但你不需要在帮助程序处理程序中再次克隆，再次在drop handler中，ui.helper可以访问（已经克隆过）帮手。

此外，.clone(true)将包含所有原始元素的数据和事件，因此应该避免在已删除的克隆上重新调用.draggable()。

你最终会得到类似的东西：

$(document).ready(function() {
    $('.draggable').draggable({
        'snapMode': 'inner',
        'helper': function(event, ui) {
            return $(this).clone(true).get(0); // the documentation says to return an element, not jQuery object.
        }
        'zIndex': 10 // 'zIndex' is a draggable option that affects the dragged element while it is being dragged.
    });
    $('.droppable').droppable({
        'accept': '.draggable, .task',
        'drop': function(event, ui) {
            ui.helper.removeClass('draggable').addClass('task').resizable().appendTo(this); // add .css('zIndex', 10) to control the zIndex of the cloned/appended element, if that's what you want.
        }
    });
});

在某些地方，你可能获得理想的效果 - 没有承诺。

jQuery draggable似乎没有正常工作

1 个答案: