Problem in long word

JavaScript
1

Hi I need help please I tweak some code here from the previous thread, my problem is that if I have a long word when I drop to the droppable area I need to center the the word in the green line in order to drop the word. is there a way that I will not center the word and I can drop immediately drop no need to center the word in the green line?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- CSS only -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<style type="text/css">

    h1 {
        text-align: center;
    }
    #phrase {
        margin: 10px auto;
    }
    #drop-em {
        max-width: 1080px;
       /* display: flex;*/
        flex-wrap: wrap;
        padding-left: 15px;
        margin: 20px auto;
        justify-content: center;
    }
    .words {
        cursor: move;
        transition: padding 0.5s ease;
    }
    .words.ui-draggable-dragging {
        background: blue;
        padding: 5px 10px;
        border-radius: 6px;

    }

    #phrase {
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        max-width: 1080px;
        justify-content: center;
    }
    #phrase > div {
        margin: 0 10px 10px;
        padding: 5px 10px;
        background: #007bff;
        border: 2px solid #007bff;
        border-radius: 6px;
        color: #fff;
    }
    #phrase > div:empty {
        background: #fff;
        border-style: dashed;
        padding: 0px 25px;
        min-height: 30px;
    }
    #drop-em span {
        min-height: 20px;
        margin: 1px;
        color: #fff;
        padding: 5px 10px;
        border: 1px solid #28a745;
        border-radius: 6px;
        background: #28a745;
        border-top:none;
        border-left:none;
        border-right:none;
    }
    #drop-em span:empty {

        background: transparent;
        border-style: solid;
        min-width: 60px;
        max-width: 100px;
        display:inline-block;

    }

    li{
        margin-bottom: 15px;
    }

</style>

</head>


<body>
    <div class="container">
        <h1>Drag buttons to line</h1>
        <div class="content">
            <div id="phrase">
                <div data-id="1"><span data-id="1" class="words">You</span></div>
                <div data-id="2"><span data-id="2" class="words">Are you afraid of the dark </span></div>
                <div data-id="3"><span data-id="3" class="words">Cute</span></div>
                <div data-id="4"><span data-id="4" class="words">We</span></div>
            </div>

            <div>
                <ol id="drop-em">
                    <li><span></span>are helpful</li>
                    <li>Are you<span></span></li>
                    <li>The dog is<span></span>.</li>
                    <li>Can<span></span>dance tonight ?</li>
                </ol>

            </div>



        </div>
    </div>

</body>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- JavaScript Bundle with Popper -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(".words").draggable({

            revert: function (event, ui) {

                var bRevertingPhrase = this.closest("#drop-em");

                if (!bRevertingPhrase.length) {
                    var phraseID = $(this).data("id");
                    var phraseHomeID = $(this).parent().data("id");


                    //If the child and parent ids don't match, we move the child to the correct parent
                    if (phraseID !== phraseHomeID) {
                        var correctCell = $("#phrase").find("div[data-id='" + phraseID + "']");
                        correctCell.prepend(this);
                    }
                }

                return !event;
            }
        });

        $("#drop-em > li > span").droppable({
            drop: function (ev, ui) {

                var spanid = $(this).find('span').data('id');
                var span = $(this).find('span');

                $("#phrase").find("div[data-id='" + spanid + "']");

                var correctCell = $("#phrase").find("div[data-id='" + spanid + "']");
                correctCell.prepend(span);

                $(this).find('span').detach();

                $(ui.draggable).detach().css({ top: 0, left: 0}).appendTo(this);
            }
        });

        $("#phrase > div").droppable({
            drop: function (ev, ui) {
                $(ui.draggable).detach().css({ top: 0, left: 0 }).prependTo(this);
            }
        });



    </script>

Thank you in advance.

2

well, you could make your entire sentence the drop zone, but it may get hairy if you try to put more than one drop slot in a sentence…

3

I believe there’s a tolerance option that allows you to just touch the line.


$("#drop-em > li > span").droppable({
    tolerance: "touch",
    drop: function(ev, ui) {
etc....

https://api.jqueryui.com/droppable/

2 Likes
4

Thanks PaulOB :slight_smile:

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.