drag.js

var dragobj;
var solution;
var origtxt;
var active=false;
var currobj;
var mixtxt;
var con_arr=new Array();
var amount;
var posx;
var width;
var startobj;
var active_parent;
var dragpoint;

//initialize script
function start(){
    $("#correct").css("visibility","hidden");

//fetch text elements from content

//extract gaps
var tmparr=new Array();
tmparr=content.split("#");
var mytemp=tmparr.length;
mixtxt = new Array();
for (i=0;i<mytemp;i=i+2){
    con_arr.push(tmparr[i]);
    mixtxt.push(tmparr[i+1]);
}

//avoid select
var element = document.getElementById("container");
 element.onselectstart = function () { return false; } // ie
 element.onmousedown = function () { return false; } // moz


mixtxt.pop();

amount=mixtxt.length;

//mix words
for (i=0;i<amount;i++){

    var my_string=mixtxt[i];
    var my_arr=new Array();
    my_arr=my_string.split("*");
    solution=my_arr.join(" ");
    my_arr.sort();
    my_string=my_arr.join("</span> <span class='drag'>");
    my_string="<span class='puzzle noScroll' data-info='"+solution+"'><span class='drag'>"+my_string+"</span><span  class='exclamation' data-info='"+solution+"'>!</span></span>";

mixtxt[i]=my_string;
//console.log(mixtxt[i]);
}

//enter text
var txt_content="";

for (i=0;i<amount;i++){
var my_str=con_arr[i];
my_str=my_str.substr(0,my_str.length-1);
    txt_content=txt_content+my_str+mixtxt[i];

}

txt_content=txt_content+con_arr[con_arr.length-1];

$("#container").html(txt_content);
$(".drag").draggable({ appendTo: "body", axis: "x",  revert: "invalid", helper: "clone", zIndex: 200});


$( ".drag" ).on( "dragstart", function( event, ui ) {
     active=true;

   $("#correct").css("visibility","hidden");
   drag_obj=$(this);
   startobj=$(this);
   $(drag_obj).addClass("blue");
   origtxt=$(this).text();

    posx=$(this).offset().left;
    breite=$(this).width();
    $(this).addClass("neuklasse");
    $(this).parent().addClass("active");
    active_parent=$(this).parent();

});


$(".drag").on( "drag", function( event, ui ) {

    drag_point=$(ui.helper).offset().left;
    $(ui.helper).css("visibility","hidden");
    posx=drag_point;

});

$( ".drag" ).droppable({ accept: ".drag" });

$( ".drag" ).on( "dropover", function( event, ui ) {
if ($(this).parent().hasClass("active")){
var mytxt=$(this).text();
$(this).text(origtxt);
$(drag_obj).text(mytxt);
$(drag_obj).removeClass("blue");
$(this).addClass("blue");
drag_obj=$(this);
}


    });


$(".drag").bind( "dragstop",function(e) {
    $(active_parent).removeClass("active");
   currobj=$(e.target).text();
   $(drag_obj).removeClass("blue");
    var tmploes=$(e.target).parent(this).data("info")+"!";

   correct = $(e.target).parent(this).text()==tmploes;

});



}