javascript - Jquery UI and Bootstrap Issue -

javascript - Jquery UI and Bootstrap Issue -

i have drag-and-drop function simplified in jsfiddle below:

http://jsfiddle.net/jdh9/6hamv/13/

i added modal button, , drag-and-drop doesn't work.

the drag , drop uses next scripts:

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

and modal button / window uses:

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

does have thought work around drag-and-drop works as, bootstrap modal?

here's javascript code:

class="lang-js prettyprint-override">$(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 1 another.

the modal button wasn't visible because had class hidden-xs , people viewing through jsfiddle's narrower result pane.

other that, both should work simultaneously. if isn't working, first @ console see if there errors on page. i'd @ each individually create sure both still working:

this fiddle should work fine:

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

javascript jquery twitter-bootstrap