Your IP : 216.73.216.48
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
#launchPad {
position: relative;
float: left;
border: 1px solid #eaeaea;
background-color: #f5f5f5;
}
#dropZone {
float: right;
border: 1px solid #eaeaea;
background-color: #ffffcc;
}
.card {
width: 50px;
height: 50px;
padding: 0px;
margin: 0px;
border:1px solid #ccc;
background-color: #eaeaea;
color: #000000;
float: left;
}
.stack {
width: 180px;
border: 1px solid #ccc;
background-color: #f5f5f5;
margin: 0px;
}
.stackHdr {
background-color: #eaeaea;
border: 1px solid #fff;
padding: 5px
}
.stackDrop1, .stackDrop2 {
min-height:300px;
padding: 0px;
}
</style>
<script src="../assets/js/jquery-3.2.1.min.js"></script>
<script src="../assets/js/jquery-ui-1.12.1.min.js"></script>
<script>
function showLetters()
{
var data=""+document.getElementById('s2').innerHTML+"";
data=data.split('<div class="card">').join('');
data=data.split('class="card ui-draggable ui-draggable-handle"').join('');
data=data.split(' ').join('');
data=data.split('\n').join('');
data=data.split('\t').join('');
data=data.split('\r').join('');
data=data.split('</div><div>').join('|');
data=data.split('<div>').join('');
data=data.split('</div>').join('');
adata=data.split('|');
adata.sort();
i=0;
data="";
while (i<adata.length)
{
if (data=="")
{
data=""+adata[0];
}
else
{
data+="|"+adata[i];
}
i++;
}
alert(data);
}
</script>
</head>
<body>
<div id="launchPad">
<div style="position: relative; top: 0px; left: 0px; width: 50px; height: 50px; background-color: #999999; color: #ffffff; overflow: hidden;"><div class="card">Б</div>Б</div>
<div class="card">В</div>
<div class="card">Г</div>
<div class="card">Д</div>
</div>
<div id="dropZone">
<div class="stack">
<div class="stackHdr">
title 1 here
</div>
<div class="stackDrop1">
</div>
</div>
<div class="stack">
<div id="s1" class="stackHdr">
title 2 here
</div>
<div id="s2" class="stackDrop2">
<div class="card">А</div>
</div>
</div>
<a href="javascript:showLetters();">Show</a>
</div>
<script>
$("#launchPad").height($(window).height() - 20);
var dropSpace = $(window).width() - $("#launchPad").width();
$("#dropZone").width(dropSpace - 70);
$("#dropZone").height($("#launchPad").height());
$(".card").draggable({
appendTo: "body",
cursor: "move",
helper: 'clone',
revert: "invalid"
});
$(".stackDrop1").droppable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
$(".stackDrop2").droppable({
tolerance: "intersect",
accept: ".card",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
// initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
init();
</script>
</body>
</html>