Ok, I have an issue with drag and drop.
What they do, they click a button, it initializes the whole drag and drop.
function sortElements() {
// Place droppable elements
var x = 0;
$("#content-body div[data-type='column'],#content-body div[data-type='carousel']").each(function() {
var el = $(this);
if(x == 0){
el.before('<div class="neoDroppableEle" id="neoDroppableEle-' + x + '"><\/div>');
x++;
}
el.addClass('edit_el').after('<div class="neoDroppableEle" id="neoDroppableEle-' + x + '"><\/div>');
x++;
el.append('<div class="drag-handle"><i class="fa fa-arrows"></i></div>');
var w = el.width();
el.css('width',w+'px');
});
$("#content-body div[data-type='insertable']").each(function() {
var el = $(this);
el.prepend('<div class="neoDroppableEle" id="neoDroppableEle-' + x + '"><\/div>');
x++;
});
// Swap entire columns
$("#content-body div[data-type='column']").draggable({
refreshPositions: true,
helper: "clone",
handle:'.drag-handle',
appendTo: "body",
zIndex: 10000,
start: function( event, ui ) {
$(".neoDroppableEle").addClass('dragging');
},
stop: function( event, ui ) {
$(".neoDroppableEle").removeClass('dragging');
}
});
$(".neoDroppableEle").droppable({
accept: "div[data-type='column']",
tolerance: "pointer",
hoverClass: "focus_in",
activeClass: "focus_in_active",
drop: function(event, ui) {
cur_ele = this.id;
var el = ui.draggable;
var html = el.html();
el.remove();
$("#" + cur_ele).replaceWith('<div class="row" data-type="column">'+html+'</div>');
}
});
// Swap individual photos within columns
$("#content-body div[data-type='imagewrap']").each(function(){
$(this).draggable({
revert: "invalid",
helper: "clone" ,
zIndex: 10001,
});
$(this).droppable({
accept: "div[data-type='imagewrap']",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var draggable = ui.draggable, droppable = $(this);
draggable.swap(droppable);
}
});
});
}
When they are done, they click the button again.
function sortElementsComplete() {
$(".ui-droppable").droppable("destroy");
$(".ui-draggable").draggable("destroy");
$(".edit_el").removeAttr('style').removeClass('edit_el');
$(".neoDroppableEle").remove();
$(".drag-handle").remove();
}
This all runs and works great!
But now I am tryng to save the HTML code after each drop for undo's. And when I save the undo, I need to remove all additional classes and elements my function to drag and drop add's. Because they may not be in the sorting area when they click undo and do not want drag handles and my borders I set up as visual aids just appearing.
So now I have:
$(".neoDroppableEle").droppable({
accept: "div[data-type='column']",
tolerance: "pointer",
hoverClass: "focus_in",
activeClass: "focus_in_active",
drop: function(event, ui) {
cur_ele = this.id;
var el = ui.draggable;
var html = el.html();
el.remove();
$("#" + cur_ele).replaceWith('<div class="row" data-type="column">'+html+'</div>');
setTimeout(function(){
sortElementsComplete();
editor_add();
},1000);
}
});
The above with the timeout code always fails with:
Error: cannot call methods on droppable prior to initialization;
attempted to call method 'destroy'
How so? It IS initialized and running. After the drop I should be able to destroy it, make my save and rebuild it. Using disable gives the same error. To me the error makes no sense.
After editor_add() is ran, it re-builds whatever they were doing, in this case it will fire sortElements(); after the save.
But the below runs fine?
// Swap individual photos within columns
$(this).droppable({
accept: "div[data-type='imagewrap']",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var draggable = ui.draggable, droppable = $(this);
draggable.swap(droppable);
setTimeout(function(){
sortElementsComplete();
editor_add();
},250);
}
});
It will error if I do not have the timeout above. Seems 250 is the min, anything lower it errors. But the first one will not ever work, no matter how long or short I make the timeout.
Really hope this makes sense.
Maybe if I used
var draggable = ui.draggable, droppable = $(this);
draggable.swap(droppable);
On it instead it would work. o.O
Related
Apologies in advance if I am bad at describing this problem... hope you can still understand it.
Right now I have a Div that has its display set to 'none'.
When I drag and drop a button on the screen, it will then add a class to unhide the div.
Those above work fine, but what I cannot figure out is how to have the div appear exactly at where I dropped the button, rather than always appearing at a fixed location in the middle of the screen (which is what it is doing right now).
Would appreciate any help I can get! Here is the part of the javascript I am using (please let me know if this isn't sufficient info):
$(document).ready(function() {
$('.js-hotspot').draggable({
helper: "clone",
revert: false,
start: function(event, ui) {
console.log("Started");
},
stop: function(event, ui) {
addAnyHotspot();
$( ".hotspot-tooltip" ).addClass( "open" ); //Unhide the div
}
});
});
I managed to solve it. This is my new code:
$(document).ready(function() {
$('.js-hotspot').draggable({
helper: "clone",
revert: false,
start: function(event, ui) {
console.log("Started");
$(document).ready(function() {
$(this).on("drag", function(e) {
var x = e.pageX;
var y = e.pageY;
var el = $("#meh"); //assign #meh to the div that needs to be opened
el.css('position', 'absolute');
el.css("left", x);
el.css("top", y);
console.log("Shifted Position");
})
});
},
stop: function(event, ui) {
addAnyHotspot();
console.log("AddAnyHotSpot");
$( ".hotspot-tooltip" ).addClass( "open" );
}
});
});
I have been trying to clone and drop a draggable at the position in a droppable at the coordinates where the drop happens. I have found examples online that deal with appending draggables to droppables, but they all seem to move the draggable to a specific part of the droppable on the initial drop.
Here is an example that does just that: - http://jsfiddle.net/scaillerie/njYqA/
//JavaScript from the jsfiddle
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
}
});
});
Is there anyway I can make the draggable stay at the coordinates where the drop occured?
you must define the coordinates in the cloned element on the drop:
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
var clone=jQuery(ui.draggable).clone().addClass("dropped").draggable();
clone.css('left',ui.position.left);
clone.css('top',ui.position.top);
jQuery(this).append(clone);
}
});
and also set the position absolute by css on the cloned components
.ui-layout-center .component {
position:absolute !important;
}
Here is working: http://jsfiddle.net/o2epq7p2/
Edited you code and used appendTo() and set the offset
jQuery(function() {
jQuery(".component").draggable({
// use a helper-clone that is append to 'body' so is not 'contained' by a pane
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
var _this = jQuery(this);
if (!ui.draggable.hasClass("dropped")) {
var cloned = jQuery(ui.draggable).clone().addClass("dropped").draggable();
jQuery(cloned).appendTo(this).offset({
top : ui.offset.top,
left: ui.offset.left
});
}
}
});
});
ui in the drop handler contains the dragged element's position absolute to the page. You need to transform those values to a position relative to the drop target and absolute position the cloned element inside the drop target using these values.
drop: function(e, ui) {
if (!ui.draggable.hasClass("dropped")) {
var parentOffset = jQuery('.ui-layout-center').offset();
var dropped = jQuery(ui.draggable).clone().addClass("dropped").draggable();
dropped.css('left', (ui.position.left - parentOffset.left) +'px');
dropped.css('top', (ui.position.top - parentOffset.top) +'px');
jQuery(this).append(dropped);
}
}
http://jsfiddle.net/3Lnqocf3/
I'm building some sort of a playlist creator. I have some items the user can choose from and a horizontal sortable timeline area to drop those items on.
The Draggable:
$(".Name:not(#Add a .Name)").draggable({
revert: 'invalid',
start: function(){
$('#MainPage').css('cursor', '-moz-grabbing');
$(".Name").css('cursor', '-moz-grabbing');
},
// helper: "clone",
helper: function() {
return $("<div class='"+$(this).parent().attr('class')+"' id='"+$(this).parent().attr('id')+"'><div class='"+$(this).attr("class")+"' id='"+$(this).attr("id")+"'>"+ $(this).attr("class").split(' ')[1] +"</div></div>");
},
stop: function() {
$('#MainPage').css('cursor', 'auto');
$(".Name").css('cursor', '-moz-grab');
},
connectToSortable: "#TimelineDrop",
appendTo: '#MainPage',
containment: 'DOM',
zIndex: 800,
addClasses: false
});
The Sortable:
$("#TimelineDrop").sortable({
over: function(event, ui) {
var Breite = ((TimeSpace*5)/(TimeSpace/(currentspacing+24)))-2;
$("#TimelineDrop").append("<div class='TimelineMarker' style='width:"+ Breite +"px;'>\u00A0</div>");
},
receive: function(event, ui) {
dropped=true;
AddElementToTimeline($(this), event, ui, dropped);
},
start: function( event, ui ){
$('#MainPage').css('cursor', '-moz-grabbing');
$('.TimelineElement').css('cursor', '-moz-grabbing');
drag=true;
},
axis: "x",
stop: function( event, ui ){
$('#MainPage').css('cursor', 'auto');
$('.TimelineElement').css('cursor', '-moz-grab');
database.updateElementPosition($('.TimelineElement').index($(ui.item)), $(ui.item).children('.TimelineElementTitle').attr('id').split('D')[1], GET('id'));
drag=false;
}
});
I tried all kinds of different stuff but can't get it to work propperly. What would like to be able to is drag items from the available area to the timeline und drop them between allready appended ones. So far the helper allways get appended (vertically) above the existing elements and when I drop it the final element get append at the very last position. I hope It's clear what I'm trying to archive...
I have a fiddle right here:
http://jsfiddle.net/5SBax/4/
I want the marker to be displayed where the element will be added (between others). And I need to get rid of the helper element which also get added every time...
Take a look at this fiddle. I'm not quite sure what you are asking, but this is a good example of drag and drop capabilities. I can't comment, and I am not quite sure what you are asking. But best of luck to you!
http://jsfiddle.net/cuhuak/4CHDZ/
function FieldType(typeName, name) {
var self = this;
self.TypeName = ko.observable(typeName || "");
self.Name = ko.observable(name || this.TypeName());
self.createField = function () {
return new Field(
{
Name: this.Name(),
TypeName: this.TypeName()
}
);
}
self.onDragStart = function(event, ui) {
dropFieldType = ko.utils.domData.get(this, "ko_drag_data");
};
self.onDragStop = function(event, ui) {
dropFieldType = null;
};
}
I read a lot of topics similar to this, but none that work with MySql database (except for sorting example )
Here's an example that I was able to implement in my script (soccer manager)
http://jsfiddle.net/k9854/
jQuery.fn.swap = function(b){
// method from: http://blog.pengoworks.com/index.cfm/2008/9/24/A-quick-and-dirty-swap-method-for-jQuery
b = jQuery(b)[0];
var a = this[0];
var t = a.parentNode.insertBefore(document.createTextNode(''), a);
b.parentNode.insertBefore(a, b);
t.parentNode.insertBefore(b, t);
t.parentNode.removeChild(t);
return this;
};
$( ".dragdrop" ).draggable({ revert: true, helper: "clone" });
$( ".dragdrop" ).droppable({
accept: ".dragdrop",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var draggable = ui.draggable, droppable = $(this),
dragPos = draggable.position(), dropPos = droppable.position();
draggable.css({
left: dropPos.left+'px',
top: dropPos.top+'px'
});
droppable.css({
left: dragPos.left+'px',
top: dragPos.top+'px'
});
draggable.swap(droppable);
}
});
all is greate, when i change player (Drag, drop and swap), but, when i refresh page, my new player ordering is lost.
how to use this example with mysql database?
or
Is there any example that works with mysql database?
thanks
I managed to get the id of the draggable div
var drag = $('.ui-draggable').attr('id');
but how to get id of (target) swapped div ?
I have jquery drag and drop working so I can move one row in a table to another.
the demo is here:
http://www.aussiehaulage.com.au/Default.aspx
I use jquery-ui-1.8.22 to make my table draggable/droppable.
My javascript is :
$(document).ready(function () {
$(".draggable").draggable({
helper: function () { return "<div class='ghost'></div>"; },
start: resizeGhost,
revert: 'invalid'
});
$(".droppable").droppable({
hoverClass: 'active',
drop: function (event, ui) {
var target = $(event.target);
var draggable = ui.draggable;
draggable.insertBefore(target);
},
tolerance: 'touch'
});
});
However when i move the row, if the mouse cursor is in between 2 rows on the droppable table both droppable rows are highlighted.. I need to make it so it will only highlight 1 droppable row at a time..
is this possible?
Add a new option in your droppable element, using either tolerance fit or intersect
$(".droppable").droppable({
hoverClass: 'active',
tolerence: 'intersect',
drop: function (event, ui) {
var target = $(event.target);
var draggable = ui.draggable;
draggable.insertBefore(target);
},
tolerance: 'touch'
});
And for your reference: jquery-ui