New Topic/Question
Reply
Any help would be appreciated!
So here is my problem, I am creating a Drag and Drop Field Generator. Kind of hard to explain.
I have 3 divs,
A | B | C
A has thumbnails of the pages from uploaded documents
B has fully pages from uploaded documents (set height of 400, each page is 800, overflow-y is auto so I had to set it to drop the dragged item into the container and make the position relative to stick to the appropriate page/spot)
C has draggable elements to drop onto the pages
The system works fine until I start adding more and more fields.
Few bugs though, like when dropped they can be dragged once more and then they stop working.
When the dragged item is dropped it creates a hidden form field to record the coords which then get saved in the database and then reassigned on the document viewer page.
BUT the CSS is not allowing multiple fields to be lined up
Example:
Signature Initials Date
Signature Initials Date
My main concern is the positioning on the viewing page, not so much the editor page, but if both need modifications then it shall be.
Images:
Here is the Javascript:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
var draggedItems = 0;
var ItemIDS = 0;
var addedFromTop = 0;
var AddedReserve = Array();
$(document).ready(function() {
$(".objectDrag").draggable({
containment: 'pages',
helper: 'clone',
revert: 'invalid',
start: function(event, ui)
{
$(ui.helper).addClass('dragging');
},
stop:function(event, ui) {
var pos=$(ui.helper).position();
$(ui.helper).removeClass('dragging');
objName = "#hfield"+draggedItems;
$(objName).removeClass("objectDrag");
$(objName).draggable({
containment: 'parent',
start: function(event, ui)
{
$(ui.helper).addClass('dragging');
},
stop:function(event, ui) {
var pos=$(ui.helper).position();
$(ui.helper).removeClass('dragging');
var inputField = ui.helper.attr('id').substr(1);
var actualField = document.getElementById(inputField);
actualField.style.top = document.getElementById(ui.helper.attr('id')).style.top;
actualField.style.left = document.getElementById(ui.helper.attr('id')).style.left;
actualField.value = 't:'+document.getElementById(ui.helper.attr('id')).style.top+'-l:'+document.getElementById(ui.helper.attr('id')).style.left+'-c:'.document.getElementById(ui.helper.attr('id')).className;
}
});
}
});
$('.droppable').droppable({
drop: function(event, ui) {
// if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
draggedItems++;
var pos=$(ui.helper).position();
var theDiv = document.getElementById('pages');
onscrollDiv(theDiv);
var element=$(ui.draggable).clone();
element.addClass("tempclass");
//element.css({"top":(pos.top-(theDiv.scrollHeight-theDiv.scrollTop))});
element.css({"top":(pos.top-(theDiv.scrollHeight-theDiv.scrollTop)-133)});
//element.css({"left":pos.left+139-(100-$(ui.draggable).width())});
element.css({"left":pos.left-(905-($(ui.draggable).width()))});
addField("field"+draggedItems,ui.helper.attr('class'),(pos.top-(theDiv.scrollHeight-theDiv.scrollTop)-133),pos.left-(905-($(ui.draggable).width())),$(this).attr('id'));
//alert('fuck');
$(this).append(element);
$(".tempclass").attr("id","hfield"+draggedItems);
$("#hfield"+draggedItems).removeClass("tempclass");
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
itemDragged = "drag" + RegExp.$1 + " " + this.id
$("#drag"+draggedItems).addClass(itemDragged);
//}
}
});
});
function addField(FID,FType,FPT,FPL,FParent)
{
var MyForm = document.getElementById(FParent);
var NewField = document.createElement('input');
NewField.setAttribute('id',FID);
NewField.setAttribute('name','fields[]');
NewField.setAttribute('type','hidden');
NewField.setAttribute('class',FType);
NewField.setAttribute('style','position:absolute; display:none');
NewField.setAttribute('value','t:'+FPT+'-l:'+FPL+'-c:'+FType);
MyForm.appendChild(NewField);
}
function onscrollDiv (div) {
var info = document.getElementById("helperPos");
info.innerHTML = "<br>Horizontal: " + div.scrollWidth
+ "px<br/>Vertical: " + div.scrollTop + "px";
}
</script>
HTML & CSS
<style>
.drag1
{
height:15px;
width:100px;
background-color:#B7CEDF;
border:1px solid #06C;
color:#06C;
font-weight:bold;
padding:3px;
text-align:center;
text-transform:uppercase;
cursor:pointer;
}
.drag2
{
height:15px;
width:75px;
background-color:#BEE4CC;
border:1px solid #060;
color:#060;
font-weight:bold;
padding:3px;
text-align:center;
text-transform:uppercase;
cursor:pointer;
}
.drag3
{
height:15px;
width:85px;
background-color:#FFC;
border:1px solid #F90;
color:#F90;
font-weight:bold;
padding:3px;
text-align:center;
text-transform:uppercase;
cursor:pointer;
}
.dragging{
opacity: 0.5;
}
</style>
<strong>Drag & Drop Fields</strong>
<br />
<div id="drag1" class="drag1 objectDrag">Signature</div>
<br />
<div id="drag2" class="drag2 objectDrag">Initials</div>
<br />
<div id="drag3" class="drag3 objectDrag">Date</div>
MultiQuote
| 