Commit 3d2cab6c authored by bbaer's avatar bbaer
Browse files

drag and drop basket case updated

parent 1529f813
......@@ -24,10 +24,12 @@ var QfqNS = QfqNS || {};
n.DragAndDrop = function ($hook) {
this.$container = $hook;
this.eventEmitter = new EventEmitter();
this.dropZones = [];
this.elements = [];
this.api = $hook.data("dnd-api");
this.key = $hook.data("dnd-key");
this.draggedId = "";
this.lastChild = "";
this.$tempObject = {};
};
n.DragAndDrop.prototype.on = n.EventEmitter.onMixin;
......@@ -60,6 +62,91 @@ var QfqNS = QfqNS || {};
return $dropArea;
};
n.DragAndDrop.prototype.setDropZones = function($objects) {
var that = this;
$objects.each(function() {
var $dropZone = $(this);
$dropZone.on("dragenter", function(e) {
e.preventDefault();
$dropZone.addClass("qfqTargetDisplay");
e.Effect = "all";
that._handleDragEnter(e);
});
$dropZone.on("dragleave", function(e) {
e.preventDefault();
$dropZone.removeClass("qfqTargetDisplay");
that._handleDragLeave(e);
});
$dropZone.on("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
});
$dropZone.on("drop", function(e) {
e.preventDefault();
e.stopPropagation();
that._dropHandler(e);
});
that.dropZones.push($dropZone);
});
};
n.DragAndDrop.prototype.setElements = function($objects) {
var that = this;
$objects.each(function() {
var $element = $(this);
$element.prop("draggable", true);
$element.on("dragstart", function(e) {
that.draggedId = $element[0].id;
});
that.elements.push($element);
});
};
n.DragAndDrop.prototype._handleDragEnter = function(event) {
var $tempObject = $("#" + this.draggedId).clone();
$tempObject.css("opacity", 0.5);
if (this.$tempObject[0]) {
if ($tempObject[0].id !== this.$tempObject[0].id) {
this.$tempObject = $tempObject;
this.$tempObject.appendTo($("#" + event.currentTarget.id));
}
} else {
this.$tempObject = $tempObject;
this.$tempObject.appendTo($("#" + event.currentTarget.id));
}
};
n.DragAndDrop.prototype._handleDragLeave = function(event) {
if(this.$tempObject[0]) {
this.$tempObject.remove();
this.$tempObject = {};
}
};
n.DragAndDrop.prototype.makeBasketCase = function() {
var dzSelector = this.$container.data("dnd-dropzone") || false;
var elSelector = this.$container.data("dnd-element") || false;
if (elSelector) {
this.setElements($("." + elSelector));
}
if (dzSelector) {
this.setDropZones($("." + dzSelector));
}
};
n.DragAndDrop.prototype._dropHandler = function(event) {
if(this.$tempObject[0]) {
this.$tempObject.remove();
this.$tempObject = {};
}
$("#" + this.draggedId).appendTo($("#" + event.currentTarget.id));
console.log("drop1");
};
n.DragAndDrop.prototype._buildOrderDropZones = function($object, e) {
this.removeDropAreas();
......
......@@ -13,6 +13,23 @@
color: white;
text-align: center;
}
.someClass {
min-height: 160px;
width: 160px;
border: 1px dashed #ccc;
margin: 15px;
}
.anotherClass {
margin: 15px;
padding: 15px;
border-radius: 5px;
text-align: center;
background-color: #5cb85c;
color: #fff;
width: 130px;
}
</style>
<link rel="stylesheet" href="../css/bootstrap.min.css">
......@@ -52,7 +69,7 @@
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="qfq-dnd" data-dnd-api="http://something/bla">
<div class="qfq-dnd-sort" data-dnd-api="http://something/bla">
<div class="anyClass" id="e1" data-dnd-id="uno" data-dnd-value="10">
Numbero Uno
</div>
......@@ -72,6 +89,39 @@
Numbero Siesta
</div>
</div>
<hr>
<div class="qfq-dnd" style="margin-top: 20px;"
data-dnd-api="http://somethingelse/bla"c
data-dnd-dropzone="someClass"
data-dnd-element="anotherClass"
>
<div class="col-md-6">
<div class="someClass" id="dz1">
</div>
<div class="someClass" id="dz2">
</div>
</div>
<div class="col-md-6">
<div class="anotherClass" id="d1">
Somebody
</div>
<div class="anotherClass" id="d2">
Otherbody
</div>
<div class="anotherClass" id="d3">
Thatbody
</div>
<div class="anotherClass" id="d4">
Not me
</div>
<div class="anotherClass" id="d5">
Otherguy
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -95,9 +145,13 @@
QfqNS.Log.level = 0;
var dragi = new QfqNS.DragAndDrop($('.qfq-dnd'));
var dragi = new QfqNS.DragAndDrop($('.qfq-dnd-sort'));
dragi.makeSortable();
var zoni = new QfqNS.DragAndDrop($('.qfq-dnd'));
zoni.makeBasketCase();
});
</script>
</body>
......
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