Commit 638998a9 authored by bbaer's avatar bbaer
Browse files

with API example

parent 6c193430
......@@ -488,6 +488,29 @@ On one of`"error"|"conflict"|"conflict_allow_force"` the Client must display `"<
On `"conflict"` the Client opens the alert as modal dialog (user can't change anything on the form) with a 'reload current
form' button.
On `"conflict_allow_force"` the Client opens the alert non-modal (default).
## Drag And Drop
Initialize a dnd container by adding the class "qfq-dnd"
### Sorting
Set container object class to "qfq-dnd qfq-dnd-sort".
Add the data elements: data-dnd-api="url" and data-dnd-key="key"
For the childrens inside of the container (just the first children):
add data-dnd-id to a reference you can handle (probably SQL id)
Request will be sent containing following information:
{"id":2,"value":50,"position":5,"setTo":"after","otherId":4}
id = id of the dragged object
value = original value of the dragged object
position = counted original position of the dragged object
setTo = "after" or "before"
otherId = id of the element the dragged element is now before or after.
otherPosition = Position of other element.
## Glossary
......
......@@ -20,22 +20,27 @@ var QfqNS = QfqNS || {};
/**
* Dragging and dropping area!
*
*/
n.DragAndDrop = function ($hook) {
this.$container = $hook;
this.eventEmitter = new EventEmitter();
this.api = $hook.data("dnd-api");
this.key = $hook.data("dnd-key");
this.draggedId = "";
this.lastChild = "";
};
n.DragAndDrop.prototype.on = n.EventEmitter.onMixin;
n.DragAndDrop.prototype.buildDropArea = function() {
n.DragAndDrop.prototype.buildDropArea = function(position, relatedId, otherPos) {
var that = this;
var $dropArea = $("<div />", {
class: "qfqDropTarget",
draggable: true
});
$dropArea.data("position", position);
$dropArea.data("related", relatedId);
$dropArea.data("other-pos", otherPos);
$dropArea.on("dragenter", function(e) {
e.preventDefault();
$dropArea.addClass("qfqTargetDisplay");
......@@ -54,14 +59,14 @@ var QfqNS = QfqNS || {};
return $dropArea;
};
n.DragAndDrop.prototype._buildOrderDropZones = function($object, e, isLast) {
n.DragAndDrop.prototype._buildOrderDropZones = function($object, e) {
this.removeDropAreas();
if ($object[0].id !== this.draggedId) {
var $dropArea = this.buildDropArea();
var $dropArea = this.buildDropArea("before", $object.data("dnd-id"), $object.data("dnd-position"));
$object.before($dropArea);
if (isLast) {
var $lastDrop = this.buildDropArea();
if ($object[0].id === this.lastChild) {
var $lastDrop = this.buildDropArea("after", $object.data("dnd-id"), $object.data("dnd-position"));
$lastDrop.appendTo(this.$container);
}
}
......@@ -71,18 +76,19 @@ var QfqNS = QfqNS || {};
this.$container.children(".qfqDropTarget").remove();
};
n.DragAndDrop.prototype.buildOrderDrops = function() {
n.DragAndDrop.prototype.makeSortable = 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);
var child = $(this);
if (numberOfChildren === count) {
isLast = true;
that.lastChild = child[0].id;
}
var child = $(this);
child.data("dnd-position", count);
child.prop("draggable", true);
child.on("dragstart", function(e) {
e.originalEvent.dataTransfer.setData("text", child[0].id);
......@@ -90,7 +96,7 @@ var QfqNS = QfqNS || {};
e.originalEvent.dataTransfer.effectAllowed = "move";
});
child.on("dragenter", function(e) {
that._buildOrderDropZones($(this), e, isLast);
that._buildOrderDropZones($(this), e, true);
});
child.on("dragend", function() {
that.removeDropAreas();
......@@ -100,9 +106,31 @@ var QfqNS = QfqNS || {};
n.DragAndDrop.prototype._moveObjectBefore = function(e, $hook) {
var id = e.originalEvent.dataTransfer.getData("text");
var $object = $("#" + id);
var posTo = $hook.data("position");
if (posTo === "after") {
this.lastChild = $object[0].id;
}
$hook.before(document.getElementById(id));
this._buildOrderUpdate($object, $hook.data("position"), $hook.data("related"), $hook.data("other-pos"));
this.removeDropAreas();
};
n.DragAndDrop.prototype._buildOrderUpdate = function($object, position, otherId, otherPos) {
var jObject = {};
jObject.id = $object.data("dnd-id");
jObject.position = $object.data("dnd-position");
jObject.setTo = position;
jObject.otherId = otherId;
jObject.otherPosition = otherPos;
this._sendToAPI(jObject);
};
n.DragAndDrop.prototype._sendToAPI = function(object) {
console.log("Api request:" + this.api + "&key=" + this.key);
console.log(JSON.stringify(object));
};
})(QfqNS);
\ No newline at end of file
......@@ -52,23 +52,23 @@
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="dragi">
<div class="subi" id="e1">
<div class="qfq-dnd" data-dnd-api="http://something/bla" data-dnd-key="ddsAsdsw3332a39D9">
<div class="subi" id="e1" data-dnd-id="5" data-dnd-value="10">
Numbero Uno
</div>
<div class="subi" id="e2">
<div class="subi" id="e2" data-dnd-id="6" data-dnd-value="20">
Numbero Deux
</div>
<div class="subi" id="e3">
<div class="subi" id="e3" data-dnd-id="7" data-dnd-value="30">
Numbero Tre
</div>
<div class="subi" id="e4">
<div class="subi" id="e4" data-dnd-id="9" data-dnd-value="40">
Numbero Quattro
</div>
<div class="subi" id="e5">
<div class="subi" id="e5" data-dnd-id="2" data-dnd-value="50">
Numbero Cinge
</div>
<div class="subi" id="e6">
<div class="subi" id="e6" data-dnd-id="4" data-dnd-value="60">
Numbero Siesta
</div>
</div>
......@@ -95,8 +95,8 @@
QfqNS.Log.level = 0;
var dragi = new QfqNS.DragAndDrop($('.dragi'));
dragi.buildOrderDrops();
var dragi = new QfqNS.DragAndDrop($('.qfq-dnd'));
dragi.makeSortable();
});
</script>
......
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