Develop Reference

Move a div to a drop position

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" );
}
});
});

Adobe Edge & Javascript / jquery show element from cloned object

Hello wizards of the internet,
I want to show a hidden element from a cloned object when it is is dropped into a certain container, called "plug1". But what it does right now is it shows the hidden element on the main object and not on the cloned object. It's also not supposed to jump back to its original position. See this gif for an example.
I believe it has something to do with the sym.getSymbol("cup1").$("hold1").show(); line, but I can't put my finger on it.
Does anyone have an idea as to how I can fix this?
Script:
sym.$(function () {
sym.$("cup1").draggable({
helper: "clone",
cursor: 'move'
});
sym.$("Stage").droppable({
drop: function (event, ui) {
var $canvas = $(this);
if (!ui.draggable.hasClass('canvas-element')) {
var $canvasElement = ui.draggable.clone();
$canvasElement.addClass('canvas-element');
$canvasElement.draggable({
containment: 'Stage'
});
$canvas.append($canvasElement);
$canvasElement.css({
left: (ui.position.left),
top: (ui.position.top),
position: 'absolute'
});
sym.$("cup1").hide().clone().appendTo('Stage');
}
}
});
//hold
sym.$("plug1").droppable({
greedy: 'true',
accept: function() { return true; },
drop: function (event, ui) { tolerance: 'fit', sym.getSymbol("cup1").$("hold1").show(); }
});
});

Create Drag & Drop, Destory, Save Re-create - jQuery

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

Jquery sortable - limit droppables

I will simplify my explanation so you get what I am doing. I have two div's and I set up portlets as shown here, however I am dynamically injecting my portlets, no big problem there.
<div id="mainallapplicant" class="myrow"></div>
<div id="contingent_right" class="myrow"></div>
Here is the JavaScript
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
beforeStop: function( event, ui ) {}
});
I am trying to allow a maximum of only one droppable into mainallapplicant. If there is one already there, I will show a confirmation dialog and depending on the answer, I cancel the drop or move out the existing item and replace it with the new item. I tried the following but I am getting nowhere.
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
start: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.sender.draggable("cancel");
}
},
stop: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.item.remove();
// Show an error...
}
}
});

You can use start to get the current count of portlet elements, then use stop to do the checking
Also notice I added class names to each div to allow only one div to have a maximum of 1 portlet
$(document).ready(function () {
$.count = 0;
$(".myrow").sortable({
connectWith: ".myrow",
revert: true,
start: function () {
$.count = $(".myrow").has(".portlet").length;
console.log("Start " + $.count);
},
stop: function (event, ui) {
if ($(ui.item).parent(".myrow").hasClass("left")) {
if ($.count == 2) {
$(".myrow").sortable("cancel");
}
}
}
});
});
DEMO: http://jsfiddle.net/Ue4dq/

Sortable list, sort items just between different list

In this example http://jqueryui.com/sortable/#connect-lists is possible to drag and drop the items between different list and also the same list.
Will it be possible to dis-activate the drag and drop in the same list and allow just the drag and drop between different lists? how?

This is the best Ican do here:
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
stop: function(event, ui) {
if (ui.item[0].parentNode == this) {
$(this).sortable('cancel');
}
}
}).disableSelection();​
Demo http://jsfiddle.net/dfsq/J6uM5/

Working Demo :) http://jsfiddle.net/UnFdU/1/
I have built a small logic behind three events, recieve, start and stop. Everytime if the list is same list then user cannot drop it else if different list they can, try it your self. Little Explanation below
When user starts Dragging start says: canDropThat = false;
recieve only gets triggered if it item is dropped from connected list, i.e. if receive is triggered make canDropThat = true; ; hence allow dropping.
In the end stop checks for the flag and if its the right flag it allows dropping else reject.
Hope it fits the cause :))
Code
$(function() {
canDropThat = false;
var sortlists = $("#List1, #List2").sortable({
tolerance: 'pointer',
connectWith: '#List1, #List2',
helper: 'original',
scroll: true,
receive: function(event, ui) {
//Run this code whenever an item is dragged and dropped into this list
canDropThat = true;
},
start: function(event, ui) {
canDropThat = false;
},
stop: function(event, ui) {
if (!canDropThat) {
$(this).sortable('cancel');
}
}
}).on('scroll', function() {
sortlists.scrollTop($(this).scrollTop());
});
});​