asked on

Drag and Drop - jQuery UI + Bootstrap - Left margin

Hi E's,

I try to use Drag and Drop from jQuery UI + Bootstrap, but in the draggable action something wrong happens, because the draggable element leaves the defined margins (in this case left: -12px), like you can see in the picture:

This is the code:

<!doctype html>
<html lang="pt">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap@5.0.2/dist/css/bootstrap.min.css">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="../../tutoriais/1431/jquery-ui-1.12.1.custom/jquery-ui.css" />
    <title>1762 htmlbs exemplo.php</title>
</head>

<body>
    <div class="container" id="limite" style="background-color:black;">
        <div class="row largar" id="caixa_um">
            <div class="arrasta" style="background: var(--bs-yellow); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Um</h1>
            </div>
            <div class="arrasta" style="background: var(--bs-info); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Dois</h1>
            </div>
        </div>
        <div class="row largar" id="caixa_dois" style="margin-top: 100px;">
            <div class="arrasta" style="background: var(--bs-primary); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Três</h1>
            </div>
            <div class="arrasta" id="qua" style="background: var(--bs-pink); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>draggable</h1>
            </div>
        </div>
    </div>

    <script src="bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="../../tutoriais/1431/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
    <script>
        $(function() {
            $("#qua").draggable({
                containment: "#limite",
                drag: function(event, ui) {
                    $("#qua").css("left", "0px");
                }
            });

            $(".largar").droppable({
                drop: function(event, ui) {
                    $("#qua").css("left", "0px");
                }
            });

        });
    </script>
</body>

</html>

Open in new window

What change I have to do for the element assume left 0px when are being dragged?

The best regards,

Scott Fell

Pedro, what is the full url you are using for

and

In order to duplicate your code

Scott Fell

Same here

Any of these files should be in a format we can copy and paste them locally and have everything work. I also don't see where you are loading jquery unless it is in the bundle file?

Sometimes just getting this stuff corrected fixes things. But I can't fully recreate this properly with the code you have.

Try putting all the code in https://jsbin.com/?html,output or https://jsfiddle.net/ or https://codepen.io/ and make it work as you expect there. Once it is, we can work on fixing things.

Pedro Chagas

ASKER

@Scott Fell,

Full code, and with cdn:

<!doctype html>
<html lang="pt">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap@5.0.2/dist/css/bootstrap.min.css">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>1762 htmlbs exemplo.php</title>
</head>

<body>
    <div class="container" id="limite" style="background-color:black;">
        <div class="row largar" id="caixa_um">
            <div class="arrasta" style="background: var(--bs-yellow); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Um</h1>
            </div>
            <div class="arrasta" style="background: var(--bs-info); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Dois</h1>
            </div>
        </div>
        <div class="row largar" id="caixa_dois" style="margin-top: 100px;">
            <div class="arrasta" style="background: var(--bs-primary); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Três</h1>
            </div>
            <div class="arrasta" id="qua" style="background: var(--bs-pink); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>draggable</h1>
            </div>
        </div>
    </div>

    <script src="bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        $(function() {
            $("#qua").draggable({
                containment: "#limite",
                drag: function(event, ui) {
                    $("#qua").css("left", "0px");
                }
            });

            $(".largar").droppable({
                drop: function(event, ui) {
                    $("#qua").css("left", "0px");
                }
            });

        });
    </script>
</body>

</html>

Open in new window

Thank you.

~JC

Scott Fell

Ok, it looks like EE is changing the links. I recreated it here

https://jsbin.com/kuzepezuru/edit?html,output

I don't have time to look at it more this instant and if somebody else does not come along, I will come back to it a little later.

Pedro Chagas

ASKER

I'm sorry @Scott Fell, I never use before that tools...

So, even later, thank you for your help please.

Thank you.

~JC

Michel Plungjan

I see the css go 12px, -12px, 12px, -12px depending on how I move my mouse left and right across the middle while dragging

Pedro Chagas

ASKER

@Michel,

How I avoid that behavior?

Thank you.

~JC

Scott Fell

Very quickly, this looks like something in Bootstrap.

If you change the box to just one row/column it works.

    <div class="container" id="limite" style="background-color:black;">
        <div class="row largar" id="caixa_um">
            <div class="arrasta" style="background: var(--bs-yellow); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Um</h1>
            </div>
            <div class="arrasta" style="background: var(--bs-info); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Dois</h1>
            </div>
        
            <div class="arrasta" style="background: var(--bs-primary); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Três</h1>
            </div>
            <div class="arrasta" id="qua" style="background: var(--bs-pink); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>draggable</h1>
            </div>
        </div>
    </div>

Open in new window

Or if you do not set the hight of the bottom row it works too

    <div class="container" id="limite" style="background-color:black;">
        <div class="row largar" id="caixa_um">
            <div class="arrasta" style="background: var(--bs-yellow); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Um</h1>
            </div>
            <div class="arrasta" style="background: var(--bs-info); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Dois</h1>
            </div>
        </div>
        <div class="row largar" id="caixa_dois" style="margin-top: 100px;">
            <div class="arrasta" style="background: var(--bs-primary); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Três</h1>
            </div>
            <div class="arrasta" id="qua" style="background: var(--bs-pink); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>draggable</h1>
            </div>
        </div>
    </div>

Open in new window

Or add another row in the middle works like https://jsbin.com/kidiluguxo/edit?html,output

    <div class="container" id="limite" style="background-color:black;">
        <div class="row largar" id="caixa_um">
            <div class="arrasta" style="background: var(--bs-yellow); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Um</h1>
            </div>
            <div class="arrasta" style="background: var(--bs-info); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Dois</h1>
            </div>
        </div>
      <div class="row largar">
        <div class="arrasta" style="height:40px">
        </div>
   
      </div>
        <div class="row largar" id="caixa_dois" >
            <div class="arrasta" style="background: var(--bs-primary); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>Três</h1>
            </div>
            <div class="arrasta" id="qua" style="background: var(--bs-pink); margin-top: 20px; cursor:pointer; width:100%;">
                <h1>draggable</h1>
            </div>
        </div>
    </div>

Open in new window

Pedro Chagas

ASKER

Good afternoon @Scott Fell,

I test all your 3 solutions, and I show the result:

I believe is something from bootstrap.

I erase class "row" and working well, but i'm running away from bootstrap.

I appreciate everyone's help, especially yours.

~JC

Scott Fell

This is using the last option

Pedro Chagas

ASKER

@Scott Fell,

Like I told in the begin of question, the problem is the drag action, because the draggable bar still with -12 left.

In your video still the same.

~JC

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Pedro Chagas

ASKER

I was already working on this solution, however I had already advanced the project. It would be better not to run away from Bootstrap, but it is indeed the possible solution.
Thank you for your attention.

The best regards,

Scott Fell

It depends on what you need. If this box does not need to be responsive, then you don't need to use the BS Rows and container. But you can put it inside a .row that may collapse. But if there is nothing that needs to go from multi column to one column in a small screen, you are good.

Pedro Chagas

ASKER

I will try do the best.