Drag and drop in fill in blanks using Jquery

Question

Below is my sample screenshot.

I had tried with drag and drop. In first 2 screenshots there will be drag and drop. Its working fine. When there will be empty box in initial. But If I set some default value in drag box it will collapse alignment. Why is it so? Below is my sample code:

$(document).ready(function() {

  function makedraggable() {
     $(".qitem2").draggable({
        "revert": "invalid"
     });
  }

  makedraggable();

     $(".box1").droppable({
        "accept": ".qitem2",
        "drop": function(event, ui) {
            if ($(this).find(".qitem2").length) {
                var $presentChild = $(this).find(".qitem2"),
                    currChildId = $presentChild.attr("id"),
                    $currChildContainer = $("#" + currChildId + "-container");                  
               $currChildContainer.append($presentChild);
               $presentChild.removeAttr("style").removeClass("drag-center-in-droppable");
               makedraggable();
            }

            $(ui.draggable).clone().appendTo(this).removeAttr("style").addClass("drag-center-in-droppable");
            $(ui.draggable).remove();

        }
     })
     function makedraggable1() {
     $(".qitem3").draggable({
        "revert": "invalid"
     });
  }

  makedraggable1();
});

PHP code

  

In order to polymeric
macromolecules into smaller portions,
digestive enzymes play a vital role in the of
absorption of nutrients in the body. Located in the digestive tracts in the bodies of animals, and in the trap in the bodies of carnivorous plants, they facilitate of food insidethe cells.  




                  
      
        cccc      
    

    
      
         bbbb      
    

    
       
           aaaa       
    
     
       
           eeee       
    
     
       
           iiii       
    
     
       
           dddd       
    
      
       
           ffff

Above is the code for draggable and droppable. If I set some words as default inside div box then drag and drop will be collapsed why is it? If anyone knows solution please help me. Thanks in advance. The working https://jsfiddle.net/c62tpc45/2/

Rahul · Accepted Answer

Try this code,

   var oldMouseStart = $.ui.draggable.prototype._mouseStart;
$.ui.draggable.prototype._mouseStart = function(event, overrideHandle, noActivation) {
  this._trigger("beforeStart", event, this._uiHash());
  oldMouseStart.apply(this, [event, overrideHandle, noActivation]);
};

function makedraggable3() {
  $(".qitem5").draggable({
    beforeStart: function() {
            window.source_index = $(this).attr("data-index");
      window.source_html = $(this).html();
    },
    "revert": "invalid"
  });
  $(".box4").droppable({
    "accept": ".qitem5",
    classes: {
      "ui-droppable-active": "ui-state-active",
      "ui-droppable-hover": "ui-state-hover"
    },
    "drop": function(event, ui) {
      window.dest_html = $(this).html();
      window.dest_index = $(this).attr("data-index");
      if (typeof window.dest_html != 'undefined' && window.dest_html != '') {
        switchContent();
      } else {
        var $presentChild = $(this).find(".qitem5"),
          currChildId = $presentChild.attr("id"),
          $currChildContainer = $("#" + currChildId + "-container");
        $currChildContainer.append($presentChild);
        $presentChild.removeAttr("style").removeClass("drag-center-in-droppable");
        makedraggable3();
        $(ui.draggable).clone().appendTo(this).removeAttr("style").addClass("drag-center-in-droppable");
        $(ui.draggable).remove();
      }
    }
  });
}
makedraggable3();
function switchContent() {
  var source_html = $("").addClass("ui-widget-header").addClass("box4").attr("data-index", window.dest_index).append(window.source_html);
  var dest_html = $("").addClass("qitem5").addClass("di1").attr("data-index", window.source_index).append(window.dest_html);

  $("[data-index=" + window.dest_index + "]").closest(".drag-container").html(source_html);
  $("[data-index=" + window.source_index + "]").closest(".drag-container").html(dest_html);
  $(":ui-draggable").draggable("destroy");
  makedraggable3();
}

You just need to map your html as

 
  Lorem Ipsum is simply
  

    Hiii
  
  text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
  
    
   ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised
  in the 1960s with the release of Letraset sheets containing
  
    
   passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.



  
    
      dummy
    
  
  
    
      textts
    
  
  
    
      woww

Give it a try, this should work.

Here is working jsfiddle

Drag and drop in fill in blanks using Jquery

Answers (1)

Related Questions