Commit 6c193430 authored by bbaer's avatar bbaer
Browse files

Working drag and drop ordering

parent fa5c2fac
......@@ -25,6 +25,7 @@ var QfqNS = QfqNS || {};
n.DragAndDrop = function ($hook) {
this.$container = $hook;
this.eventEmitter = new EventEmitter();
this.draggedId = "";
};
n.DragAndDrop.prototype.on = n.EventEmitter.onMixin;
......@@ -36,7 +37,6 @@ var QfqNS = QfqNS || {};
draggable: true
});
$dropArea.on("dragenter", function(e) {
console.log("enter");
e.preventDefault();
$dropArea.addClass("qfqTargetDisplay");
});
......@@ -45,38 +45,63 @@ var QfqNS = QfqNS || {};
e.originalEvent.dataTransfer.dropEffect = "move";
});
$dropArea.on("dragleave", function(e) {
e.preventDefault();
$dropArea.removeClass("qfqTargetDisplay");
$dropArea.remove();
});
$dropArea.on("drop", function(e) {
e.preventDefault();
console.log("Boom");
that.updateOrder(e, $dropArea);
e.originalEvent.preventDefault();
that._moveObjectBefore(e, $dropArea);
});
return $dropArea;
};
n.DragAndDrop.prototype._buildOrderDropZones = function($object, e, isLast) {
this.removeDropAreas();
if ($object[0].id !== this.draggedId) {
var $dropArea = this.buildDropArea();
$object.before($dropArea);
if (isLast) {
var $lastDrop = this.buildDropArea();
$lastDrop.appendTo(this.$container);
}
}
};
n.DragAndDrop.prototype.removeDropAreas = function() {
this.$container.children(".qfqDropTarget").remove();
};
n.DragAndDrop.prototype.buildOrderDrops = function() {
var that = this;
var numberOfChildren = this.$container.children().length;
var count = 0;
var isLast = false;
this.$container.children().each( function() {
count++;
console.log(numberOfChildren + " " + count);
if (numberOfChildren === count) {
isLast = true;
}
var child = $(this);
child.prop("draggable", true);
child.on("dragstart", function(e) {
console.log(e);
e.originalEvent.dataTransfer.setData("text", child.id);
e.originalEvent.dataTransfer.setData("text", child[0].id);
that.draggedId = child[0].id;
e.originalEvent.dataTransfer.effectAllowed = "move";
});
var $dropArea = that.buildDropArea();
child.before($dropArea);
child.on("dragenter", function(e) {
that._buildOrderDropZones($(this), e, isLast);
});
child.on("dragend", function() {
that.removeDropAreas();
});
});
var $dropArea = this.buildDropArea();
$dropArea.appendTo(this.$container);
};
n.DragAndDrop.prototype.updateOrder = function(e, $hook) {
console.log(e.dataTransfer.getData("text"));
console.log($hook);
n.DragAndDrop.prototype._moveObjectBefore = function(e, $hook) {
var id = e.originalEvent.dataTransfer.getData("text");
$hook.before(document.getElementById(id));
this.removeDropAreas();
};
......
......@@ -415,21 +415,11 @@ i.@{spinner_class} {
}
.qfqDropTarget {
height: 5px;
transition: height 100ms;
height: 50px;
margin: 1px;
border: 1px dashed #ccc;
}
.qfqTargetDisplay {
height: 50px;
margin: 5px;
border: 1px dashed #25adf1;
}
.subi {
height: 40px;
background-color: #5cb85c;
line-height: 40px;
color: white;
text-align: center;
margin: 15px;
}
\ No newline at end of file
......@@ -5,6 +5,16 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
.subi {
height: 40px;
background-color: #5cb85c;
line-height: 40px;
color: white;
text-align: center;
}
</style>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/jqx.base.css">
......@@ -39,8 +49,8 @@
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="dragi">
<div class="subi" id="e1">
......@@ -52,6 +62,15 @@
<div class="subi" id="e3">
Numbero Tre
</div>
<div class="subi" id="e4">
Numbero Quattro
</div>
<div class="subi" id="e5">
Numbero Cinge
</div>
<div class="subi" id="e6">
Numbero Siesta
</div>
</div>
</div>
</div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment