4

I'm new to using stack snippets (and JS in general) but the example in my SO question works perfectly on JSFiddle example code, and not on Stack Overflow. I initially thought it was due to the placement of the jQuery library call inside the snippet but I'm not sure that's the case because it seems like intended behavior per this post.

How can I troubleshoot a stack snippet?

This is tagged as a discussion because I believe the problem is an error on my end, not a bug in SO.

2
  • Strangely enough if I debug that JSFiddle I get the same error but the fiddle still works ....
    – rene
    May 10, 2018 at 19:55
  • 1
    @rene it's about the UI library of jQuery loaded automatically withing the jsfiddle unlike the snippet here May 10, 2018 at 20:53

1 Answer 1

3

You need to load the jQuery UI, it's not loaded by default within the stack snippet unlike in jsfiddle:

enter image description here

Here is you snippet working fine when loading jQuery UI

$('#floor').droppable({
    tolerance: 'fit'
});

$('#drag').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
    }
});

$('#drag').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function(event,ui){
        ui.draggable.draggable('option','revert',true);
    }
});
#other { display:inline-block; width:300px; height:200px; border:1px solid silver; background-color:whitesmoke; padding:10px; }

#drag { display:inline-block; width:80px; height:30px; border:1px solid silver; background-color:white; }

#floor { display:inline-block; width:100px; height:100px; border:1px solid silver; background-color:yellow; padding:10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></script>
<div id="drag" class="ui-widget-content" onmousedown="shift('drag')">drag me</div>

<div id="container">
    <div id="floor">foo</div>
    <div id="other">bar</div>
</div>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .