I want to Short Div with Animation with javascript or jquery not workin in IE, but working in other browsers.
JS is below:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" ></script>
var questionCount = 0;
function animateSort(parent, child, sortAttribute) {
var promises = [];
var positions = [];
var originals = $(parent).find(child);
var sorted = originals.toArray().sort(function (a, b) {
return $(a).attr(sortAttribute) < $(b).attr(sortAttribute);
});
originals.each(function () {
//store original positions
positions.push($(this).position());
}).each(function (originalIndex) {
//change items to absolute position
var $this = $(this);
var newIndex = sorted.indexOf(this);
sorted[newIndex] = $this.clone(); //copy the original item before messing with its positioning
$this.css("position", "absolute").css("top", positions[originalIndex].top + "px");//.css("left", positions[originalIndex].left + "px");
//animate to the new position
var promise = $this.animate({
top: positions[newIndex].top + "px",
left: positions[originalIndex].left + "px"
}, 1000);
promises.push(promise);
});
//instead of leaving the items out-of-order and positioned, replace them in sorted order
$.when.apply($, promises).done(function () {
originals.each(function (index) {
$(this).replaceWith(sorted[index]);
});
});
}
// $(function () {
// $("input").click(function () {
// animateSort("#listing", "div", "data-value");
// });
// });
function dragStart(event) {
//debugger;
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
//debugger;
// document.getElementById("demo").innerHTML = "The p element is being dragged";
// $("#"+ID).animate({ "opacity": "0.02" }, "slow");
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {;
// debugger;
event.preventDefault();
var dropdiv = document.getElementById(event.target.id);
if (dropdiv.childElementCount == 0) {
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
var text = document.getElementById(data);
document.getElementById(event.target.id).setAttribute('data-value', ((text.innerHTML).split('>')[0]).split("<")[0]);
animateSort("#listing", "div", "data-value");
var image = text.childNodes[1];
questionCount = questionCount + 1;
if (questionCount == 4) {
// var messagediv = document.getElementById("divMessage");
// messagediv.style.display = "block";
}
}
else
{
alert('Please remove earlier score to add new one.');
}
}
function deleteItem(ItemId) {
// debugger;
var paragraph = ItemId.parentElement;
var divID = (paragraph.parentElement).id;
if (divID.indexOf('dropdiv') != -1) {
var innerParagraph = $("#" + paragraph.id);
var imageID = (ItemId.id).split("img")[1];
innerParagraph.remove();
document.getElementById(divID).setAttribute('data-value', "0");
var dragDiv = $("#dragdiv" + imageID);
dragDiv.append("<p ondragstart='dragStart(event)' ondrag='dragging(event)' draggable='true' " +
" id='dragtarget" + imageID + "'" + " class='Pragraph'>" + imageID + "<img src='bullet_cross.png' id='img" + imageID + "'" + " alt='' draggable='false' onclick='deleteItem(this);' " +
" style='vertical-align: top;float:right;cursor:pointer;' /></p>");
animateSort("#listing", "div", "data-value");
questionCount = questionCount - 1;
// var messagediv = document.getElementById("divMessage");
// messagediv.style.display = "none";
}
}
function ValidateAndMove() {
if (questionCount < 4) {
alert('Please complete the questions score to move to next question.');
return false;
}
else {
window.location.reload;
}
}
Html Below:
<div style="margin-top: 5%; margin-left: 20px;height:300px;">
<div style="height:100%" id="listing">
<div id="dropdiv1" class="droptarget" ondragover="allowDrop(event)" ondrop="drop(event)" data-value="0">
Precise, Questioning, Reflective</div>
<br/>
<div id="dropdiv2" class="droptarget" ondragover="allowDrop(event)" ondrop="drop(event)" data-value="0">
Assertive, Challenging, Determined</div>
<br/>
<div id="dropdiv3" class="droptarget" ondragover="allowDrop(event)" ondrop="drop(event)" data-value="0">
Congenial, Engaging, Optimistic</div>
<br/>
<div id="dropdiv4" class="droptarget" ondragover="allowDrop(event)" ondrop="drop(event)" data-value="0">
Accepting, Patient, Caring</div>
<br/>
</div>
</div>
<div class="container">
<div style="margin-top: 5%; margin-left: 20px;height:300px;">
<div style="margin-left: 5%; z-index: 10000; position: fixed;">
<div class="dragdiv" id="dragdiv1" ondragover="allowDrop(event)" ondrop="drop(event)">
<p class="Pragraph" id="dragtarget1" draggable="true" ondrag="dragging(event)" ondragstart="dragStart(event)">1<img style="vertical-align: top;float:right;cursor:pointer;" onclick="deleteItem(this);" draggable="false" alt="" id="img1" src="bullet_cross.png">
</p>
</div>
<div class="dragdiv" id="dragdiv2" ondragover="allowDrop(event)" ondrop="drop(event)">
<p class="Pragraph" id="dragtarget2" draggable="true" ondrag="dragging(event)" ondragstart="dragStart(event)">2<img style="vertical-align: top;float:right;cursor:pointer;" onclick="deleteItem(this);" draggable="false" id="img2" alt="" src="bullet_cross.png">
</p>
</div>
<div class="dragdiv" id="dragdiv3" ondragover="allowDrop(event)" ondrop="drop(event)">
<p class="Pragraph" id="dragtarget3" draggable="true" ondrag="dragging(event)" ondragstart="dragStart(event)">3<img style="vertical-align: top;float:right;cursor:pointer;" onclick="deleteItem(this);" draggable="false" id="img3" alt="" src="bullet_cross.png">
</p>
</div>
<div class="dragdiv" id="dragdiv4" ondragover="allowDrop(event)" ondrop="drop(event)">
<p class="Pragraph" id="dragtarget4" draggable="true" ondrag="dragging(event)" ondragstart="dragStart(event)">4<img style="vertical-align: top;float:right;cursor:pointer;" onclick="deleteItem(this);" draggable="false" id="img4" alt="" src="bullet_cross.png">
</p>
</div>
<div class="dragdiv" id="dragdiv5" ondragover="allowDrop(event)" ondrop="drop(event)">
<p class="Pragraph" id="dragtarget5" draggable="true" ondrag="dragging(event)" ondragstart="dragStart(event)">5<img style="vertical-align: top;float:right;cursor:pointer;" onclick="deleteItem(this);" draggable="false" id="img5" alt="" src="bullet_cross.png">
</p>
</div>
<div>
<input type="submit" style="float: right; margin-left: 88%;" class="myButton" id="ButtonContinue" onclick="return ValidateAndMove();" value="Continue" name="ButtonContinue"/>
</div>
</div>
</div>
Any help,
Thanks in advance.