Draggable не останавливаясь на jquery - PullRequest
Новая
       16

Draggable не останавливаясь на jquery

0 голосов
/ 22 февраля 2019

Мои извинения, если на этот вопрос был дан ответ в другом вопросе, я не смог найти ответ, относящийся к моей проблеме!Я делаю викторину для заполнения бланков.Вот мой код. 

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);сбросить событие, но тогда я не смогу вернуть перетаскиваемое в начальное положение при перетаскивании из выпадающего.

Может ли кто-нибудь мне помочь?

...