jQuery-ui droppable to sortable inside iframe - javascript

I have droppable elements in main frame, and sortable inside iframe app. What I need is to connect them - to be able to drag items to iframe's sortable
There is what I've done:
http://jsfiddle.net/w9L3eorx/1/
Inside iframe I have
<div class="content">
<div class="block">Foo</div>
<div class="block">Bar</div>
</div>
<script>
$('.content').sortable({
iframeFix: true,
placeholder: 'block-placeholder',
update: function (event, ui) {
// turn the dragged item into a "block"
ui.item.addClass('block');
}
});
</script>
The main frame
<div class='items'>
<div class="one">One</div>
<div class="two">Two</div>
</div>
<iframe src="frame.html" id="frame" width="800" height="800"></iframe>
<script>
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
iframeFix: true,
connectToSortable: $('.content', $("#frame")[0].contentDocument)
});
</script>
I see working example http://ma.rkusa.st/zepto-dnd/example.html. But it is built without jquery and is not working on IE9

Here you go:
$('.items div').draggable({
helper: function(e) {
return $('<div>').addClass('block').text( $(e.target).text() );
},
iframeFix: true,
connectToSortable:$('#frame').contents().find('.content').sortable({
iframeFix: true,
placeholder: 'block-placeholder',
update: function (event, ui) {
// turn the dragged item into a "block"
ui.item.addClass('block');
}
})
});
FIDDLE: http://jsfiddle.net/w9L3eorx/5/
Note that your iframe should be just plain HTML (do not initialize sortable there or it will misbehave)

I have changed boszlo example to fit my needs:
I need first init sortable in iframe (my dropable sidebar will appear later after some clicks)
I need re-init sortable in parent (main) frame with connected dropable but with exact the same options.
http://jsfiddle.net/w9L3eorx/8/
So in iframe I have added function
window.destroySortableAndGetOptions = function (selector) {
var opts = $(selector).sortable('option');
$(selector).sortable('destroy');
return opts;
}
Which will destroy sortable and returns options.
And in my main frame before droppable init, I destroy sortable and take options
var sortableOptions = document.getElementById('frame').contentWindow.destroySortableAndGetOptions('.content');
and re-init sortable with the same options
...
connectToSortable:$('#frame').contents().find('.content').sortable(sortableOptions)
...

Related

In angular 8, drag and drop with custom clone

Drag the content from the one component list and drop the content into another component and content will not be dropped into particular position.
Drag the div any drop any certain position on the page. I have found solution in jquery 1.9.1
<div class="dragger">Drag</div>
<div class="dragger">Drag</div>
<div class="dragger">Drag</div>
<div class="dragger">Drag</div>
<div class="dragger">Drag</div>
<div class="dropper">
<p>Drop</p>
</div>
jquery 1.9.1+javascript
$(document).ready(function () {
$('.dragger').draggable({
revert: "invalid",
helper: function () {
//Code here
return $("<div class='dragger'></div>").append("Hi");
}
});
$(".dropper").droppable({
drop: function (event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
var element = $('.ui-draggable-dragging');
var currentDrop=$(this);
return element.clone().appendTo(currentDrop);
}
});
});
but when I will implement that code in latest jquery version then it will show ERROR TypeError: $(...).draggable is not a function
how to implement that code in angular 8

Dynamically use the droppable function - jQuery UI

I am trying to create a drag and drop of elements. I have a piece of html in the main section:
<div class="dashboard_container ui-droppable">
<div class="ab-builder-el el-empty ui-droppable" ordering="-0.5">
<p>Plaats hier je element</p>
</div>
</div>
To drop and add a piece of html (generated by some variables with php) in between the div with id=div(number) I have the following JavaScript:
//Draggable part
$('.ab-nav-element').draggable({
appendTo: '.scroll-container',
revert: 'invalid',
cursor: "move",
distance: 50,
revertDuration: 250,
helper: 'clone',
start: function(){
$('.el-empty').addClass('el-receptive');
elementName = 'standard_columns';//$(this).attr('')
},
stop: function(){
$('.el-receptive').removeClass('el-receptive');
}
});
//Droppable part
var dropContent = '<div id="div2" ordering="0"></div><div class="ab-builder-el el-empty ui-droppable" ordering="0.5"><p>Plaats hier je element</p></div>';
$('.el-empty').droppable({
hoverClass : 'ui-hover',
drop: function() {
$('.el-empty').after(dropContent);
$('#div2').load("builder-loader.php",
{
elementname: elementName,
}
);
}});
As you can see I use an AJAX call to update the content of the div.
Because I add content after, my new div's arent connected to the droppable event.
How am I able to bind the new div's to the droppable event?
The result is somewhat like this: http://jsfiddle.net/abayob/mws94soj/12/
Break your code out into functions:
var make_droppable = function($elements) {
$elements.droppable({
hoverClass : 'ui-hover',
drop: drop_function
});
}
var drop_function = function() {
var dropContent = '<div id="div2" ordering="0"></div><div class="ab- builder-el el-empty ui-droppable" ordering="0.5"><p>Plaats hier je element</p></div>';
$('.el-empty').after(dropContent);
$('#div2').load("builder-loader.php",
{
elementname: elementName,
}
);
// rebind new elements
make_droppable($('.el-empty'));
}
// call this for the first time.
make_droppable($('.el-empty'));
I misunderstood how droppable works.
In this part: "$('.el-empty').droppable({" I initialize the droppable.
The only thing I had to is create is a function that I call after the drop:
function dropreload () {$('.ab-builder-el').droppable({
hoverClass : 'ui-hover',
drop: function() {
$('.el-empty').after(dropContent);
var divId = 2;
$('#div2').load("builder-loader.php",
{
elementname: elementName,
divId:divId
}
);
dropreload();
}})};
Call the function in between the $(document).ready({}) to initialize the droppable event for the first time. The rest is done after the drops.
I guess it was a long day :)

Jquery UI Draggable clone disappearing

I am trying to use the jquery-ui draggable to make some element draggable.
I set the helper option to clone the current element.
It's making the clone correctly but when I drop the clone disappears. It doesn't stay at the dragged place.
See this for Demo Fiddle Link
$('#drag').draggable({
helper: function (e, ui) {
return $(this).clone();
}
});
What am I missing ?
There maybe a simpler way, but through data of draggable, you can target a property that deals with this. Like this:
stop : function(e, ui){
$('#drag').draggable().data()["ui-draggable"].cancelHelperRemoval = true;
}
fiddle: http://jsfiddle.net/n10ucrLd/
I think there's been a lot of troubles with helper: 'clone'. I always got it to work, when I defined a droppable as well. E.g.:
HTML:
<div id="drag">Drag This</div>
<div class="container"></div>
JavScript:
$('#drag').draggable({
helper: function (e, ui) {
return $(this).clone(true);
}
});
$( ".container" ).droppable({
drop: function (event, ui) {
ui.draggable.clone().appendTo($(this)).draggable();
}
});
Live example: http://jsbin.com/vibeqaganu/1/edit?html,css,js,output

Drop is called when draggable is leaving nested sortable

I have Droppable div with nested Sortable and Draggable which is connected to the Sortable and is accepted by the Droppable.
<div id="droppable">
<div id="nested-sortable"></div>
</div>
<div class="draggable">
test
</div>
jQuery (2.0.2)
$("#droppable").droppable({
accept: ".draggable",
drop: function() {
console.log('Dropped'); //This should be called on drop!!
}
});
$("#nested-sortable").sortable({
placeholder: 'item',
});
$(".draggable").draggable({
connectToSortable: "#nested-sortable",
helper: "clone"
});
My problem is that when I drag the Draggable over the Sortable, drop event is triggered. I don't understand why - I haven't dropped it.
I reproduced it in this fiddle: http://jsfiddle.net/9ydp3L7q/3/
Thanks
I found a dirty workaround. I really don't like it but it seems to work alright.
I ignore drop if the helper has ui-sortable-helper (which it gets when it's over the sortable).
$("#droppable").droppable({
accept: ".draggable",
drop: function(event, ui) {
if (ui.helper.hasClass("ui-sortable-helper")) {
return;
}
console.log('Dropped');
}
});
But I have to remove the class manually on out of the sortable. If I try to just remove the class I get into and infinate loop (and javascript on the page crashes) - so I had to do it in timeout.
$("#nested-sortable").sortable({
placeholder: 'item',
out: function(event, ui) {
// this looks kind of dirty to me
setTimeout(function () {
$(ui.helper).removeClass("ui-sortable-helper")
}, 1);
}
});
Fixed fiddle: http://jsfiddle.net/9ydp3L7q/6/
Use disable for sortable while using draggable. and Use disable for draggable while using sortable.
$( ".selector" ).sortable( "disable" );
$( ".selector" ).draggable( "disable" );
or
$('.selector').draggable({
disabled: false
});
$(".selector").sortable({
disabled: false
});

Knockout causing dysfunctional accordion

I got this jquery accordion code:
$(function () {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$("#accordion")
.accordion({
header: "> div > h3",
collapsible: true,
active: false,
heightStyle: "content",
icons: icons
})
.sortable({
axis: "y",
handle: "h3",
stop: function (event, ui) {
var items = [];
ui.item.siblings().andSelf().each(function () {
//compare data('index') and the real index
if ($(this).data('index') != $(this).index()) {
items.push(this.id);
}
});
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children("h3").triggerHandler("focusout");
ui.item.parent().trigger('stop');
}
})
.on('stop', function () {
$(this).siblings().andSelf().each(function (i) {
//kjører for alle "childs" i accordian...
$(this).data('index', i);
});
})
.trigger('stop');
});
This works fine with a static HTML like the following:
<div id="accordion">
<div id ="Scene 1" class="group">
<h3><b>#1: Task no 1</b></h3>
<div>
<textarea > Description of first task </textarea>
</div>
<div id ="Scene 2" class="group">
<h3><b>#2: Task no 2/b></h3>
<div>
<textarea> Decription of task</textarea>
</div>
</div>
</div>
But after making the HTML dynamic with knockout, the accordion no longer expands (or collapses) when clicking on the title.
Here´s the knockout/dynamic HTML:
<div id="accordion" data-bind="foreach: Tasks">
<div data-bind="attr : {'id': 'Task' + TaskId}" class="group">
<h3><b>#<span data-bind="text: TaskId"></span>: <span data-bind="text: Taskname"></span></b></h3>
<div>
<textarea data-bind="value: Description"></textarea>
</div>
</div>
</div>
Can anybody see where the problem is?
Do you get any errors in the browser dev console? So in Chrome, you need to press F12 (I think) or if you're like me and use Firefox, install FireBug then press F12 on the web page.
Chrome Dev
Console: https://developers.google.com/chrome-developer-tools/docs/console
FireBug: https://getfirebug.com/
These tools will definitely help you debug Javascript errors. I can't see much wrong with your syntax.
I got this from the knockout forum, so no credits to me but to zew...:
He writes: "
if it's related to rendering then a simple test with setTimeout should help ... I've edited your fiddle
http://jsfiddle.net/k5gfA/5/"
Basically zew just put the timeoutfunction around the accordion function like this:
$(function () {
setTimeout( function() {
$("#accordion")
.accordion({
header: "> div > h3"
,collapsible: true
,active: false
,heightStyle: "content"
})
.sortable({
axis: "y",
handle: "h3",
stop: function (event, ui) {
var items = [];
ui.item.siblings().andSelf().each(function () {
//compare data('index') and the real index
if ($(this).data('index') != $(this).index()) {
items.push(this.id);
}
});
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children("h3").triggerHandler("focusout");
// Now, print out the order of the accordion...
if (items.length) $("#sekvens").text(items.join(','));
ui.item.parent().trigger('stop');
}
})
.on('stop', function () {
$(this).siblings().andSelf().each(function (i) {
$(this).data('index', i);
});
})
.trigger('stop');
}, 1000);
});
The setTimeout actually solves the issue.
Must be due to DNN delaying the rendering somehow (??)
Anyhow the code as it is in the jsfiddle fix the problem in DNN.
(NOTE: I have upgrader DNN to version 7.1.1. which run jQuery-1.9.1 and jQuery-UI-1.10.3)
Thanks for all the help everyone!!!! :D

Categories

Resources