Skip to content

Instantly share code, notes, and snippets.

@max-berman

max-berman/index.html

Created October 25, 2014 17:51
Show Gist options
  • Save max-berman/936365a2c994b3580e26 to your computer and use it in GitHub Desktop.
Save max-berman/936365a2c994b3580e26 to your computer and use it in GitHub Desktop.
Download ZIP
tets // source http://jsbin.com/gugihe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<meta name="description" content="tets" />
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
body {
font-family: "Courier New", Courier, monospace;
font-size:11px;
}
section {
margin:10px;
}
.target {
width:100px;
height:100px;
border:1px double #ccc;
position:relative;
margin-left: 100px;
background:#eee;
position:relative;
z-index:-1;
}
.ui-state-hover {
border: 1px dotted red;
}
.ui-state-active,
.ui-state-highlight{
border: 1px dotted #000;
}
.ui-draggable.ui-draggable-dragging {
border:1px dotted #fff;
}
.bw, .colored {
border:1px dotted #000;
position: absolute;
}
.bw {
width:30px;
height: 30px;
background-color: #ccc;
left:10px;
}
.colored {
width:15px;
height: 15px;
background-color: #EE3B3B;
left:280px;
}
#cats {
margin: 20px 0 0 100px;
border:1px solid #ccc
}
#response {
margin-top:200px;
background:#000;
width:100px;
min-height:30px;
color:#fff;
padding:5px;
}
</style>
</head>
<body>
<section></section>
<aside class="target"></aside>
<input id="cats">
<div id="response"></div>
<script id="jsbin-javascript">
//http://jqueryui.com/droppable/#accepted-elements
var elNumber = 16;
var obj = [];
var html;
var target;
var selectedCat = '';
var classCollection = ['cat1', 'cat2', 'cat3', 'cat4'];
function Element(i, s, p, c, cat) {
this.style = 'top:'+p+'px;background-color:'+c+'';
this.id = 'el'+i;
this.class = s;
this.colorAttr = c;
this.cat = cat;
}
//To randomly choose array atem
Array.prototype.random = function () {
return this[Math.floor((Math.random()*this.length))];
};
$(document).ready(function(){
for (i=0; i<elNumber; i++) {
//Random Color generator
var randColor = '#'+Math.random().toString(16).substr(-6);
if (i%2) {
obj[i] = new Element(i, 'colored', 10*i+1, randColor, classCollection.random());
}
else {
obj[i] = new Element('el_'+i, 'bw', 20*i+10, '#ccc', classCollection.random());
}
html = $('<div/>',{
'id': obj[i].id,
'class': obj[i].class + ' ' +obj[i].cat,
'style': obj[i].style,
'data-color': obj[i].colorAttr,
'data-cat': obj[i].cat,
'html':obj[i].cat
});
html.appendTo('section');
}
$('.bw, .colored').draggable({ revert: "invalid" });
$('.target').droppable({
activeClass: "ui-state-hover",
//hoverClass: "ui-state-active",
drop: function( event, ui ) {
$.ajax({
type: "POST",
url: 'http://webshticks.com/receiver.php',
data : {
id: ui.draggable.attr('id'),
cat: ui.draggable.attr('data-cat'),
color: ui.draggable.attr('data-color')
},
beforeSend: function() {
$('#response').html('loading...');
},
success: function(data) {
$('#response').html(data.id +'<br>'+ data.color+ '<br>' + data.cat);
if (selectedCat == data.cat) {
$('.'+selectedCat)
.css({'background-color': ui.draggable.attr('data-color')})
.attr('data-color', ui.draggable.attr('data-color'));
}
}
});
}
});
//Autocomplete
$( "#cats" ).autocomplete({
source: classCollection
});
$('#cats').on('change', function () {
$('#response').html('selected: ' + this.value);
selectedCat = this.value;
}).change();
$('#cats').on('autocompleteselect', function (e, ui) {
$('#response').html('selected: ' + ui.item.value);
selectedCat = ui.item.value;
});
}); //
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"><\/script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"><\/script>
<meta name="description" content="tets" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<section></section>
<aside class="target"></aside>
<input id="cats">
<div id="response"></div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">body {
font-family: "Courier New", Courier, monospace;
font-size:11px;
}
section {
margin:10px;
}
.target {
width:100px;
height:100px;
border:1px double #ccc;
position:relative;
margin-left: 100px;
background:#eee;
position:relative;
z-index:-1;
}
.ui-state-hover {
border: 1px dotted red;
}
.ui-state-active,
.ui-state-highlight{
border: 1px dotted #000;
}
.ui-draggable.ui-draggable-dragging {
border:1px dotted #fff;
}
.bw, .colored {
border:1px dotted #000;
position: absolute;
}
.bw {
width:30px;
height: 30px;
background-color: #ccc;
left:10px;
}
.colored {
width:15px;
height: 15px;
background-color: #EE3B3B;
left:280px;
}
#cats {
margin: 20px 0 0 100px;
border:1px solid #ccc
}
#response {
margin-top:200px;
background:#000;
width:100px;
min-height:30px;
color:#fff;
padding:5px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">//http://jqueryui.com/droppable/#accepted-elements
var elNumber = 16;
var obj = [];
var html;
var target;
var selectedCat = '';
var classCollection = ['cat1', 'cat2', 'cat3', 'cat4'];
function Element(i, s, p, c, cat) {
this.style = 'top:'+p+'px;background-color:'+c+'';
this.id = 'el'+i;
this.class = s;
this.colorAttr = c;
this.cat = cat;
}
//To randomly choose array atem
Array.prototype.random = function () {
return this[Math.floor((Math.random()*this.length))];
};
$(document).ready(function(){
for (i=0; i<elNumber; i++) {
//Random Color generator
var randColor = '#'+Math.random().toString(16).substr(-6);
if (i%2) {
obj[i] = new Element(i, 'colored', 10*i+1, randColor, classCollection.random());
}
else {
obj[i] = new Element('el_'+i, 'bw', 20*i+10, '#ccc', classCollection.random());
}
html = $('<div/>',{
'id': obj[i].id,
'class': obj[i].class + ' ' +obj[i].cat,
'style': obj[i].style,
'data-color': obj[i].colorAttr,
'data-cat': obj[i].cat,
'html':obj[i].cat
});
html.appendTo('section');
}
$('.bw, .colored').draggable({ revert: "invalid" });
$('.target').droppable({
activeClass: "ui-state-hover",
//hoverClass: "ui-state-active",
drop: function( event, ui ) {
$.ajax({
type: "POST",
url: 'http://webshticks.com/receiver.php',
data : {
id: ui.draggable.attr('id'),
cat: ui.draggable.attr('data-cat'),
color: ui.draggable.attr('data-color')
},
beforeSend: function() {
$('#response').html('loading...');
},
success: function(data) {
$('#response').html(data.id +'<br>'+ data.color+ '<br>' + data.cat);
if (selectedCat == data.cat) {
$('.'+selectedCat)
.css({'background-color': ui.draggable.attr('data-color')})
.attr('data-color', ui.draggable.attr('data-color'));
}
}
});
}
});
//Autocomplete
$( "#cats" ).autocomplete({
source: classCollection
});
$('#cats').on('change', function () {
$('#response').html('selected: ' + this.value);
selectedCat = this.value;
}).change();
$('#cats').on('autocompleteselect', function (e, ui) {
$('#response').html('selected: ' + ui.item.value);
selectedCat = ui.item.value;
});
}); //
</script></body>
</html>
Raw
jsbin.gugihe.css
body {
font-family: "Courier New", Courier, monospace;
font-size:11px;
}
section {
margin:10px;
}
.target {
width:100px;
height:100px;
border:1px double #ccc;
position:relative;
margin-left: 100px;
background:#eee;
position:relative;
z-index:-1;
}
.ui-state-hover {
border: 1px dotted red;
}
.ui-state-active,
.ui-state-highlight{
border: 1px dotted #000;
}
.ui-draggable.ui-draggable-dragging {
border:1px dotted #fff;
}
.bw, .colored {
border:1px dotted #000;
position: absolute;
}
.bw {
width:30px;
height: 30px;
background-color: #ccc;
left:10px;
}
.colored {
width:15px;
height: 15px;
background-color: #EE3B3B;
left:280px;
}
#cats {
margin: 20px 0 0 100px;
border:1px solid #ccc
}
#response {
margin-top:200px;
background:#000;
width:100px;
min-height:30px;
color:#fff;
padding:5px;
}
Raw
jsbin.gugihe.js
//http://jqueryui.com/droppable/#accepted-elements
var elNumber = 16;
var obj = [];
var html;
var target;
var selectedCat = '';
var classCollection = ['cat1', 'cat2', 'cat3', 'cat4'];
function Element(i, s, p, c, cat) {
this.style = 'top:'+p+'px;background-color:'+c+'';
this.id = 'el'+i;
this.class = s;
this.colorAttr = c;
this.cat = cat;
}
//To randomly choose array atem
Array.prototype.random = function () {
return this[Math.floor((Math.random()*this.length))];
};
$(document).ready(function(){
for (i=0; i<elNumber; i++) {
//Random Color generator
var randColor = '#'+Math.random().toString(16).substr(-6);
if (i%2) {
obj[i] = new Element(i, 'colored', 10*i+1, randColor, classCollection.random());
}
else {
obj[i] = new Element('el_'+i, 'bw', 20*i+10, '#ccc', classCollection.random());
}
html = $('<div/>',{
'id': obj[i].id,
'class': obj[i].class + ' ' +obj[i].cat,
'style': obj[i].style,
'data-color': obj[i].colorAttr,
'data-cat': obj[i].cat,
'html':obj[i].cat
});
html.appendTo('section');
}
$('.bw, .colored').draggable({ revert: "invalid" });
$('.target').droppable({
activeClass: "ui-state-hover",
//hoverClass: "ui-state-active",
drop: function( event, ui ) {
$.ajax({
type: "POST",
url: 'http://webshticks.com/receiver.php',
data : {
id: ui.draggable.attr('id'),
cat: ui.draggable.attr('data-cat'),
color: ui.draggable.attr('data-color')
},
beforeSend: function() {
$('#response').html('loading...');
},
success: function(data) {
$('#response').html(data.id +'<br>'+ data.color+ '<br>' + data.cat);
if (selectedCat == data.cat) {
$('.'+selectedCat)
.css({'background-color': ui.draggable.attr('data-color')})
.attr('data-color', ui.draggable.attr('data-color'));
}
}
});
}
});
//Autocomplete
$( "#cats" ).autocomplete({
source: classCollection
});
$('#cats').on('change', function () {
$('#response').html('selected: ' + this.value);
selectedCat = this.value;
}).change();
$('#cats').on('autocompleteselect', function (e, ui) {
$('#response').html('selected: ' + ui.item.value);
selectedCat = ui.item.value;
});
}); //
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment