CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user25829
user25829

Reputation: 11

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:

and the modal button / window uses:

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:

$(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 );
  } 
}

Upvotes: 1

Views: 459

Answers (1)

KyleMit
KyleMit

Reputation: 29869

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/

Upvotes: 2

Related Questions