Jquery Drag & Drop: Change element from li to div and back - javascript

I am trying the following:
Stage 1:
Change the draggable element from li to div on drop in #canvas
Move the draggable element inside #canvas
Stage 2:
Change the draggable element from div to li on drop in #imagelist
Move the draggable element inside #imagelist
Js:
$(function () {
var $imagelist = $("#imagelist");
var $canvas = $("#canvas");
$('li', $imagelist).draggable();
$canvas.droppable({
drop: function (event, ui) {}
});
$imagelist.droppable({
drop: function (event, ui) {}
});
});
Html:
<div id="listwrapper">
<ul id="imagelist">
<li class="draggable>Content that should not be lost on drag/drop</li>
<li class=" draggable>Content that should not be lost on drag/drop</li>
</ul>
</div>
<div id="canvas">
<div class="draggable">Content that should not be lost on drag/drop</div>
</div>
Could someone help me with this?

You can create a new function to change the element type - which is what I think you need:
(function($) {
$.fn.changeElementType = function(newType) {
var attrs = {};
$.each(this[0].attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
this.replaceWith(function() {
return $("<" + newType + "/>", attrs).append($(this).contents());
});
};
})(jQuery);
see here
and here

Related

How to change data attributes on drag and drop Jquery UI?

I made a jQuery function where the user can drag and drop divs. But I want to change their data attributes whenever users drag and drop them, eg-
<div data-num="1">one</div>
<div data-num="2">Two</div>
<div data-num="3">Three</div>
<div data-num="4">Four</div>
Whenever user drag div three and place it on the top then it should change its data attribute data-num="3" to data-num="1" and the div after it should change its data attribute to data-num=2 and so on according to their position
What I am Trying
jQuery( "#app" ).sortable({
update: function(a, b) {
parseInt(jQuery(a).attr("data-num"),10) - parseInt(jQuery(b).attr("data-num"),10);
}
});
To achieve your goal you can hook an event handler to the stop event of the sortable. Then you can loop through each child div in #app and update the data-num to match the index of the element. Try this:
jQuery($ => {
$("#app").sortable({
stop: () => {
$('#app > div').each((i, el) => $(el).data('num', i + 1));
}
});
// only for testing...
$('button').on('click', () => {
$('#app > div').each((i, el) => console.log(`${el.textContent} - ${$(el).data('num')}`));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="app">
<div data-num="1">One</div>
<div data-num="2">Two</div>
<div data-num="3">Three</div>
<div data-num="4">Four</div>
</div>
<button>Test</button>
we can also achieve this by using the item index
jQuery("#app").sortable({
update: function(e, ui) {
jQuery("#app div").each(function(i, elm) {
$elm = jQuery(elm);
var elindex = $elm.index("#app div");
$elm.attr("data-num", elindex+1);
});
}
});

"this" not reffering to the selected element

I am trying to drag and drop elements to a div from another div through jQuery. I am adding the clone but not the actual element I have dragged to the droppable div.
I have then added the original element which I have dragged to the source div. Also, I have added the class "clone" to the clone element.
The problem is when I drag and drop the element in the droppable div(which is actually a clone), the element is copied and added to the droppable div but at the wrong position.
$("#drop").droppable({ accept: ".draggable",
drop: function(event, ui) {
var droppable = $(this);
console.log("drop");
$(this).removeClass("border").removeClass("over");
var dropped = ui.draggable;
var droppedOn = $(this);
console.log($(this).attr('class'));
if(!($(this).hasClass("clone"))) {
console.log("no clone");
$(dropped).detach().css({top: 0,left: 0}).appendTo("#origin");
var clone = dropped.clone().addClass("clone");
clone.appendTo(droppedOn);
}
},
I then found out that the "this" I was referring to is not updating correctly and I am very confused at this point.
I am a noob and I can't think of the solution.
Here is the pen:
https://codepen.io/ishankgupta95/pen/rZyOYb
The problem with your code is that your $(this) is pointing your div id="box" rather than the individual cloned div or images. so $(this) will never have a class named clone.
Here, solved it replace this in your code, Issue is fixed.
$("#drop").droppable({ accept: ".draggable",
drop: function(event, ui) {
var check = 0;
// $( "#test" ).droppable( "dragstart", function( event, ui ) {check = 1;} );
var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
var droppable = $(this);
console.log("drop");
$(this).removeClass("border").removeClass("over");
var dropped = ui.draggable;
var droppedOn = $(this);
console.log($(this).attr('class'));
if(!elementMouseIsOver.classList.contains("clone")) {
console.log("no clone");
$(dropped).detach().css({top: 0,left: 0}).appendTo("#origin");
// dropped.clone().appendTo(droppedOn);
var clone = dropped.clone().addClass("clone");
clone[0].id = 'test';
clone.appendTo(droppedOn);
}
},
over: function(event, elem) {
$(this).addClass("over");
console.log("over");
},
out: function(event, elem) {
$(this).removeClass("over");
}
});

JQuery-UI draggable item become undraggable

I have 2 divs: leftDiv and mainDiv. leftDiv contains some list elements which are draggable and droppable into mainDiv. I want to make these dropped items draggable inside the mainDiv as well, but after the first drag inside this div, items become non draggable. How can I fix this? Here is my jQuery code:
$('#output li').draggable({
helper: 'clone',
revert: 'invalid'
});
$('#mainDiv').droppable({
drop: function (event, ui) {
if(ui.draggable.hasClass('foo')){
$(ui.helper).remove();
$(this).append(ui.draggable.draggable());
}
else {
var item = $('<div class="foo">').append(ui.draggable.text());
item.draggable();
$(this).append(item);
}
}
});
You can fix it like this:
$('#mainDiv').droppable({
drop: function (event, ui) {
if(ui.draggable.hasClass('foo')){
//$(ui.helper).remove();
var draggedItem = ui.draggable.draggable();
$(this).append(draggedItem);
draggedItem.draggable();
}
else {
var item = $('<div class="foo">').append(ui.draggable.text());
item.draggable();
$(this).append(item);
}
}
});
Online Demo (fiddle)

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 :)

Draggable not working?

Hi all i have a function where i have to drag and drop elements here is my code:
$(document).ready(function() {
var i = 0;
$("button[id='columnadd']").click(function () {
alert(1);
var domElement = $('<aside id="shoppingCart' + i + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');
i++;
$(this).after(domElement);
});
$(".small_box li" ).draggable({
appendTo: "body",
helper: "clone"
});
});
$('#shoppingCart ol').droppable({
accept: '.small_box li',
drop: function (event, ui) {
alert(1);
$(this).find(".placeholder").remove();
$("<li></li>").text(ui.draggable.text()).appendTo(this);
}
});
here is my html:
<aside class="small_box">
<h4>BRANDS</h4>
<ul>
<li id ="brand1"><a class="" href="#">Brand1</a></li>
<li id ="brand2">Brand2</li>
<li id ="brand3">Brand3</li>
<li id ="brand4">Brand4</li>
</ul>
</aside>
i should be able to drop in at this place <li class="placeholder">Add your items here</li>
var domElement = $('<aside id="shoppingCart' + i + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');
any help is much appreciated
First, please fix your code indentations.
There are some mistakes on your code:
var i = 0;
I think it should be a global variable. So put it outside your $(document).ready(function() {}) block;
You create a DOM Element (which is the drop area) upon click and this element is not in your page until you click the trigger. By doing $('#shoppingCart ol').droppable({...}) in $(document).ready(function() {}) block you try to add droppable to an element that even not in your page, so this won't do a thing.
What you should do is make the element droppable after you create that element and put it on your page. here's an example:
$("button[id='columnadd']").click(function () {
// create the element
var domElement = $('<aside id="shoppingCart' + i++ + '" class="shoppingCart"><h2 class="ui-widget-header">Add Menu Items Here</h2><aside class="ui-widget-content" id="droppable"><ol><li class="placeholder">Add your items here</li></ol></aside></aside>');
// put it after $(this)
$(this).after(domElement);
// at this point you have domElement in your page
// make it droppable
domElement.find("ol").droppable({
// put options here
greedy: true,
drop: function (event, ui) {
makeItDroppableToo(event, ui, this);
}
});
});
and this is the function to make your dropped element has its own placeholder
function makeItDroppableToo(e, ui, obj) {
$(obj).find(".placeholder").remove();
var placeholder = $("<ol><li class='placeholder'>You can also drop it here</li></ol>");
$("<li></li>").append(ui.draggable.text()).append(placeholder).appendTo($(obj));
// this is the same as the previous one
placeholder.droppable({
// put options here
greedy: true,
drop: function (event, ui) {
makeItDroppableToo(event, ui, this);
}
});
}
Try this fiddle, I was working with JQueryUI
http://jsfiddle.net/ashpriom/yHLGP/
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});

Categories

Resources