Question

很抱歉，如果在另一个问题中回答了这个问题，我找不到与我的问题有关的答案！我正在填写空白测验。这是我的代码。

var a = 3;

$(init);
function init() {

    $('.draggable').draggable({

        start: function (event, ui) {
            $(this).css("z-index", a++);
        },

        drag: function (event, ui) {
            if ($(this).data('droppedin')) {
                $(this).data('droppedin').droppable('enable');
                $(this).data('droppedin', null);
                $(this).removeClass('dropped')
            }
        },

        revert: function (event) {
            $(this).data("uiDraggable").originalPosition = {
                top: 0,
                left: 0
            };
            return !event;
        }
    });

    $('.droppable').droppable({

        accept: ".draggable",

        drop: function (event, ui) {
            $(this).addClass('answered');
            ui.draggable.position({
                my: 'center',
                at: 'center',
                of: $(this)
            });
            ui.draggable.addClass("dropped");
            ui.draggable.data('droppedin',$(this));
            $(this).droppable('disable');
            $(this).data('answer', ui.draggable.data('answer'));

        },

        out: function (event,ui) {
            $(this).removeClass('answered');
            $(this).data('answer', "Ο");
        }
    });
}

span {
    width: 110px;
    display: inline-block;
    height: 20px;
    background: #ffffff;
    border-bottom: #2196f3 solid 2px;
}

p {
    padding: 10px;
    line-height: 30px;
    word-wrap: break-word;
}

ul {
    list-style: none;
    padding: 10px;
}

.draggable {
    height: auto;
    display: inline-block;
    margin: 2px 2px;
    padding: 2px;
    background: rgb(0, 47, 255);
    color: #FFFFFF;
    border: #5b694d solid 2px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
}

.dropped {
    display: inline-block;
    margin: 2px 2px;
    padding: 2px;
    background: transparent;
    border: none;
    box-shadow: none;
    color: black;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="jquery-ui.min.css">
    <link rel="stylesheet" href="styleFillBlanks.css">
    <script src="jquery-3.3.1.min.js"></script>
    <script src="jquery-ui.min.js"></script>


    <script type="text/javascript" src="jquery-simulate-ext-master/libs/jquery.simulate.js"></script>
    <script type="text/javascript">$.simulate.ext_disableQuirkDetection = true;</script>
    <script type="text/javascript" src="jquery-simulate-ext-master/src/jquery.simulate.ext.js"></script>
    <script type="text/javascript" src="jquery-simulate-ext-master/src/jquery.simulate.key-sequence.js"></script>
    <script src="myFunctionFillBlanks.js"></script>
</head>
<body>

<p id="keimeno">Αυτό είναι ένα κείμενο που παίρνει ένα κενό
    <span class="droppable" id="keno1"></span>
    και ένα κενό
    <span class="droppable" id="keno2"></span>
    και ένα τελευταίο κενό
    <span class="droppable" id="keno3"></span>
</p>

<ul>
    <li class="draggable" id="apantisi1">Απάντηση 1</li>
    <li class="draggable" id="apantisi2">Απάντηση 2</li>
    <li class="draggable" id="apantisi3">Απάντηση 3</li>
    <li class="draggable" id="apantisi4">Απάντηση 4</li>
    <li class="draggable" id="apantisi5">Απάντηση 5</li>
</ul>

<input class="reset" id="btnreset" type="submit">

</body>
</html>

当我在范围上放置可拖动对象并调整窗口可放置对象大小时，它不会留在原地。另外，当我尝试更改可放置大小以适合可拖动文本换行时，使可放置显示超出放置位置。尝试添加$（this）.append（ui.draggable）;放下事件，但是当我从可放下拖放时，我无法将可放回起始位置。

有人可以帮我吗？

可拖动式不停留在可拖放式jQuery上

0 个答案: