1

I want to design a drag and drop property for fill in the blanks from the given options, for example:-

Q: He is a __ boy.

Option:
a. good
b. bad.

In this user will be able to pick the options and drop on the blanks. And options should not be in list instead it should be in div.

  <script>
            $(function() {
                $("#sortable1, #sortable2").sortable({
                    connectWith: ".connectedSortable"
                }).disableSelection();
            });
        </script>
        </head>

        <body>
            <div id="sortable1" class="connectedSortable">
                This is a  <div >_______</div> story
                He is a <div>_______</div> boy.
                Food is <div >________</div> here.


            </div>
            <b>option</b>
            <div id="sortable2" class="connectedSortable">
                <div >good</div>
                <div >bad</div>
                <div >lousy</div>
                <div >nice</div>
                <div >awesome</div>
            </div>
user2926947
  • 47
  • 1
  • 7

1 Answers1

1

Its better to use jQueryUI for drag and drop functionality rather than writing your own plugin. Here is solution for your problem.

http://jsfiddle.net/ayniam/4aMhr/

 <html> 
<head>

  <title>jQuery UI Droppable - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#draggable1" ).draggable();
    $( "#droppable" ).droppable();
    $( "#draggable2" ).draggable();

  });   

</script>
</head>

    <body>
     <div>He is a <div id="droppable" style="display:inline">  __________________  </div></div>
    <div id="draggable1">
     <p>boy</p>
     </div>
    <div id="draggable2">
       <p>girl</p>   
    </div>    
    </body>
</html>

However, i used function expressions for individual id selectors, if you want to use multiple id selectors, have a look at this

jQuery Multiple ID selectors

Hope it solves your problem.

Community
  • 1
  • 1
ayniam
  • 573
  • 2
  • 8
  • 27
  • Thanks for reply sir, i appreciate the work, but i am looking for something where we can drag the option and drop into the blanks and the the blank should get the value of the option. – user2926947 Mar 04 '14 at 07:13
  • Hi..First of all no sirs. change value attribute of the blank element.You can play around it to get the desired result like this.This is from jquery official webpage. $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } }); }); – ayniam Mar 04 '14 at 07:19
  • Can you set an input to be droppable with jqueryui? – Anthony Mar 04 '14 at 07:24