CODEWITHSUNDEEP
javascriptinteract.js
Diogo Miriades
Diogo Miriades

Reputation: 13

Drag with interact.JS

How can I drag an object between two bootstrap columns, with Interact.JS? See http://codepen.io/drumiriades/pen/dGrygg.

 <body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">      
                <div class="boardLeft">
                    <p>Left</p>
                    <div class="draggable">
                    <p id="drag-1"> dragg me</p>
                        </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="boardRight">
                    <p>Right</p>
                </div>
            </div>
        </div><!--/ row-->
    </div> <!--/ container-->
</body>

I have an object with ID=drag-1 that is draggable on the left column (Class= boardLeft) but I can't drag it to the right column (Class= boardRight). How can I drag it to the right column?

Upvotes: 1

Views: 1601

Answers (1)

J. Titus
J. Titus

Reputation: 9690

z-index of the .draggable object must be 1 or greater to see the .draggable object on top of the right container.

Additionally, your restrict option is set to restrict the .draggable component to its parent container only. Removing this option allows you to drag it into the right container.

On top of these couple things - you're referencing elements in your JavaScript that don't exist in your layout (#grid-snap, .dropzone, and #yes-drop)

I've updated the CodePen with the elements that do exist, and now it shows that the item is dropped into the right container... but it changes the content. Not sure if that's what you wanted, but that's what your JavaScript is doing.

http://codepen.io/anon/pen/yewLdb

Upvotes: 3

Related Questions