Commit 904ecb38 authored by bbaer's avatar bbaer
Browse files

Basic stuff for drag around testing

parent c5ad93cc
/**
* @author Benjamin Baer <benjamin.baer@math.uzh.ch>
*/
/* global $ */
/* global EventEmitter */
/* @depend QfqEvents.js */
/* @depend Alert.js */
/**
* Qfq Namespace
*
* @namespace QfqNS
*/
var QfqNS = QfqNS || {};
(function (n) {
'use strict';
/**
* Dragging and dropping area!
*
*/
n.DragAndDrop = function ($hook) {
this.$container = $hook;
this.eventEmitter = new EventEmitter();
};
n.DragAndDrop.prototype.on = n.EventEmitter.onMixin;
n.DragAndDrop.prototype.buildDropArea = function() {
var that = this;
var $dropArea = $("<div />", {
class: "qfqDropTarget",
draggable: true
});
$dropArea.on("dragenter", function(e) {
console.log("enter");
e.preventDefault();
$dropArea.addClass("qfqTargetDisplay");
});
$dropArea.on("dragleave", function(e) {
e.preventDefault();
$dropArea.removeClass("qfqTargetDisplay");
});
$dropArea.on("drop", function() { that.updateOrder($(this));});
return $dropArea;
};
n.DragAndDrop.prototype.buildOrderDrops = function() {
var that = this;
this.$container.children().each( function() {
var child = $(this);
child.prop("draggable", true);
var $dropArea = that.buildDropArea();
child.before($dropArea);
});
var $dropArea = this.buildDropArea();
$dropArea.appendTo(this.$container);
};
n.DragAndDrop.prototype.updateOrder = function($hook) {
console.log($hook);
};
})(QfqNS);
\ No newline at end of file
......@@ -16,7 +16,6 @@ var QfqNS = QfqNS || {};
n.TypeAhead = {};
/**
* Coerce corejs-typeahead into our use-case.
*
......@@ -219,5 +218,4 @@ var QfqNS = QfqNS || {};
}
$element.typeahead('val', results[0].value);
};
})(QfqNS);
})(QfqNS);
\ No newline at end of file
......@@ -412,4 +412,24 @@ i.@{spinner_class} {
.alert-interactive p.buttons {
margin-top: 20px;
text-align: center;
}
.qfqDropTarget {
height: 5px;
transition: height 100ms;
}
.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<link rel="stylesheet" href="../css/jqx.bootstrap.css">
<link rel="stylesheet" href="../extension/Resources/Public/Css/qfq-bs.css">
<title>Input Mode Switcher</title>
</head>
<body style="background-color: #f5f5f5;">
<div class="container-fluid">
<div class="row">
<div class="col-md-10 ">
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group" role="group">
<button id="save-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-ok"></span></button>
<button id="close-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="btn-group" role="group">
<button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-trash"></span></button>
</div>
<div class="btn-group" role="group">
<a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
class="glyphicon glyphicon-plus"></span></a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="dragi">
<div class="subi" id="e1">
Numbero Uno
</div>
<div class="subi" id="e2">
Numbero Deux
</div>
<div class="subi" id="e3">
Numbero Tre
</div>
</div>
</div>
</div>
</div>
<p><br></p>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/validator.min.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script type="text/javascript">
$(function () {
var qfqPage = new QfqNS.QfqPage({
tabsId: 'myTabs',
formId: 'myForm',
submitTo: 'api/' + $("#submitTo").val(),
deleteUrl: 'api/' + $("#deleteUrl").val(),
fileUploadTo: 'api/' + $("#uploadTo").val(),
fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val()
});
QfqNS.Log.level = 0;
var dragi = new QfqNS.DragAndDrop($('.dragi'));
dragi.buildOrderDrops();
});
</script>
</body>
</html>
\ No newline at end of file
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