Jquery UI and Bootstrap Issue

I have a drag-and-drop function simplified in the jsfiddle below:

http://jsfiddle.net/JDH9/6haMV/13/

I added a Modal button, and now the drag-and-drop doesn't work.

The drag and drop uses the following scripts:

• 1.5.0/jquery.min.js
• 1.8.9/jquery-ui.min.js

and the modal button / window uses:

• bootstrap.min.js
• code.jquery.com/jquery.js

Does anyone have an idea to work around this so that my drag-and-drop works as well as, the bootstrap modal?

Here's the javascript code:

<!-- language: lang-js -->

$(init);

function init() {

    $('#element_1').data( 'number', 1 ).attr( 'id', 'card'+1 ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );
    
    $('#slot_1').data( 'number', 1 ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );

}

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  if ( slotNumber == cardNumber ) {
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
  } 
}

They Shouldn't Impact One Another.

The modal button wasn't visible because it had the class hidden-xs and most people are viewing through jsFiddle's narrower result pane.

Other than that, they both should work simultaneously. If something isn't working, I would first look at your console to see if there are any errors on the page. Then I'd look at each individually to make sure that both are still working:

This fiddle should work just fine:

http://jsfiddle.net/6haMV/31/