I work with dropable zones, and i have 2 zones is a Dropbox where a create boxes and Final Destination where i drop boxes, for now it's working good but if i want to drop out from Final Destination to Dropbox it's not working.
If check code, i see that box left in Final Destination container.
So i want to have possibility to drop in and drop out from containers, exacly from Final Destination to Dropbox
JSFIDDLE
Code:
$(document).ready(function() {
$("#addBtn").click(function() {
const $div = $("<div>", {
class: "alert alert-info draggable alwaysTop",
text: "Say-Da-Tay!"
}).draggable({
revert: 'invalid',
cursor: 'move',
});
$("#dropbox").prepend($div);
});
$(".droppable").droppable({
accept: ".draggable",
drop: function(event, ui) {
const draggable = ui.draggable;
const $droppable = $(this);
console.log(event.pageX, event.pageY, ui);
$(draggable).detach().css({
position: 'absolute',
left: ui.offset.left - $droppable.offset().left + 15 + 1,
top: ui.offset.top,
}).appendTo($droppable);
}
});
});
.alwaysTop {
width: max-content;
z-index: 99999999;
}
#final_dest {
min-height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="col-md-4">
<div class="panel panel-primary parentPanel">
<div class="panel-heading">
<h3 class="panel-title">Dropbox</h3>
</div>
<div class="panel-body droppable" id="dropbox">
</div>
</div>
</div>
<div class="btn - btn-warning col-md-2" id="addBtn">
Add Item
</div>
<div class="col-md-4">
<div class="panel panel-success parentPanel">
<div class="panel-heading">
<h3 class="panel-title">Final Destination</h3>
</div>
<div class="panel-body droppable" id="final_dest">
</div>
</div>
</div>
<div id="offset">
</div>
</div>
Related
I have a div1 on which I applied ondrag which is working i.e on dragging the element the handler is getting called and I am getting the target element as that particular div1.
Now while dragging the div1 over the other divs(eg: 5 divs) is it possible to determine the id’s of other div over which the div1 is dragging .
For eg I have this code :
<html>
<head>
<style>
.design {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div style="width: 100px; height: 35px;border: 1px solid #aaaaaa;" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">Drag me!</div>
<div class="design" ></div>
<script>
/* Events fired on the drag target */
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
document.getElementById("demo").innerHTML = "The p element is being dragged";
}
</script>
</body>
</html>
But here I have the restriction that I cannot use drag events on any div apart from the two I have applied however I can use mouseevent
Thanks
As there are no code examples, we won't be able to give you code responses that may help you. That said, you can start reading from this link to understand drop targets and collision detection.
https://javascript.info/mouse-drag-and-drop#potential-drop-targets-droppables
if you want drag and drop fuctionality and to check which div is dragged and on which it is dropped you can use jquery sortable ui plugin . Let us assume i have Ledpipeline page on which i have four pipeline stages sortable10 , sortable 11 , 12 and 13 so i used below code hope this will help you
<ul class="ui-sortable defaultscroll" id="sortable-10">
<li data-LeadID="L1">
<div class="leadpilinelist">
<p class="leadpname">John Doe</p>
<div class="selrdurationbox">
<span class="selerlead">Seller :</span>
<span class="slerleadname"></span>
</div>
<div class="selrdurationbox">
<span class="selerlead">Duration :</span>
<span class="slerleadname"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-ss-12 col-sm-3 col-xs-6 padding0">
<div class="leadpipelinebox ovrflw_hiddn">
<div class="headbox_pipeline">
<h4>Contact Made</h4>
<span id="ContactMadeCount">0</span>
<i class="mdi mdi-contacts"></i>
</div>
<ul id="sortable-11" class="ui-sortable defaultscroll">
<li data-LeadID="L2">
<div class="leadpilinelist">
<p class="leadpname">John Doe</p>
<div class="selrdurationbox">
<span class="selerlead">Seller :</span>
<span class="slerleadname"></span>
</div>
<div class="selrdurationbox">
<span class="selerlead">Duration :</span>
<span class="slerleadname"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-ss-12 col-sm-3 col-xs-6 padding0">
<div class="leadpipelinebox ovrflw_hiddn">
<div class="headbox_pipeline">
<h4>Meeting Arranged</h4>
<span id="MeetingArrage">0</span>
<i class="mdi mdi-account-multiple"></i>
</div>
<ul id="sortable-12" class="ui-sortable defaultscroll">
<li data-LeadID="L3">
<div class='leadpilinelist'>
<p class='leadpname'>John Doe</p>
<div class='selrdurationbox'>
<span class="selerlead">Seller :</span>
<span class='slerleadname'></span>
</div>
<div class='selrdurationbox'>
<span class='selerlead'>Duration :</span>
<span class='slerleadname'></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-ss-12 col-sm-3 col-xs-6 padding0">
<div class="leadpipelinebox ovrflw_hiddn">
<div class="headbox_pipeline">
<h4>Proposal Made</h4>
<span id="ProposalCounter">0</span>
<i class="mdi mdi-file"></i>
</div>
<ul id="sortable-13" class="ui-sortable defaultscroll">
<li data-LeadID="L4">
<div class="leadpilinelist">
<p class="leadpname">John Doe</p>
<div class="selrdurationbox">
<span class="selerlead">Seller :</span>
<span class="slerleadname"></span>
</div>
<div class="selrdurationbox">
<span class="selerlead">Duration :</span>
<span class="slerleadname"></span>
</div>
</div>
</li>
</ul>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function ChangeStage(SenderDiv, RecieveOnStage, LeadID) {
alert ("DraggedDiv :"+SenderDiv + "RecievedonWhichDiv :" + RecieveOnStage + "AttributeID value dragged div :" +LeadID);
}
$(document).ready(function() {
$("#sortable-10").sortable({
start: function (event, ui) {
$("span#result").html($("span#result").html()
+ "<b>start</b><br>");
},
receive: function (event, ui) {
var RecieveFrom = ui.sender.attr("id");
var DroppedONStage = event.target.id;
var DroppedEmentID = $(ui.item).attr("data-LeadID");
ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
},
connectWith: ".ui-sortable",
});
$("#sortable-11").sortable({
connectWith: ".ui-sortable",
start: function (event, ui) {
$("span#result").html($("span#result").html()
+ "<b>start</b><br>");
},
receive: function (event, ui) {
var RecieveFrom = ui.sender.attr("id");
var DroppedONStage = event.target.id;
var DroppedEmentID = $(ui.item).attr("data-LeadID");
ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
},
});
$("#sortable-12").sortable({
connectWith: ".ui-sortable",
start: function (event, ui) {
$("span#result").html($("span#result").html()
+ "<b>start</b><br>");
},
receive: function (event, ui) {
var RecieveFrom = ui.sender.attr("id");
var DroppedONStage = event.target.id;
var DroppedEmentID = $(ui.item).attr("data-LeadID");
ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
},
});
$("#sortable-13").sortable({
connectWith: ".ui-sortable",
start: function (event, ui) {
$("span#result").html($("span#result").html()
+ "<b>start</b><br>");
},
receive: function (event, ui) {
var RecieveFrom = ui.sender.attr("id");
var DroppedONStage = event.target.id;
var DroppedEmentID = $(ui.item).attr("data-LeadID");
ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
},
});
});
</script>
I'm trying to add a class of "collapse" to a specific div when the item is dropped into the droppable area. I've been successfully able to remove a class from a droppable item but adding one is alluding me. Can someone help?
jQuery
$(function () {
var removeIntent;
$(".drag li").draggable({
cursor: "move",
revert: "invalid",
helper: "clone",
});
//Droppable function
$(".droppable").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
var dropId = ui.draggable.attr("id");
var targetCount = $(this).find("[id*='clone']").length;
var $dropElemClone = ui.draggable.clone();
$dropElemClone
.attr("id", dropId + "-clone-" + (targetCount + 1))
.appendTo(this)
.addClass("form-btn-wide")
.find(".elementHidden")
.removeClass("elementHidden");
}
//Sorting function
}).sortable({
items: "> li:not(.placeholder)",
sort: function () {
$(this).removeClass("ui-state-default");
},
over: function () {
removeIntent = false;
}, //Remove function
out: function () {
removeIntent = true;
},
beforeStop: function (event, ui) {
if (removeIntent == true) {
ui.item.remove();
}
}
})
});
Droppable HTML
<div class="createForm droppable">
<div class="col-md-12 text-center">
<p>Onboarding glory aways you, %User.Name%. Go forth and automate.<br /></p>
<div class="panel panel-default col-md-offset-2 col-md-8">
<div class="panel-body">
<p>How do you want to trigger this<br /> onboarding sequence?</p>
<input type="button" class="btn btn-sm btn-primary" value="Set enrollment" />
</div>
</div>
</div>
<div class="col-md-offset-5 col-md-2 text-center">
<i class="fa fa-2x fa-arrow-down" aria-hidden="true"></i>
</div>
Draggable HTML
<ol id="two-col" class="drag">
<li class="btn form-btn draggable">
<div id="cardtitle" class="cardtitle">
<div>
<i class="fa fa-check-circle fa-3x text-primary"></i>
</div>
<div class="row m-t-md">
<p class="text-primary text-center"><strong>Complete<br /> Vendor Profile</strong></p>
</div>
</div>
<div class="panel panel-default col-md-offset-2 col-md-8 elementHidden text-center">
<div class="panel-body">
<div>
<i class="fa fa-check-circle fa-3x text-primary"></i>
</div>
<div class="row m-t-md">
<p class="text-primary text-center"><strong>Complete Vendor Profile</strong></p>
</div>
</div>
</div>
<div class="col-md-offset-5 col-md-2 text-center elementHidden">
<i class="fa fa-2x fa-arrow-down" aria-hidden="true"></i>
</div>
</li>
</ol>
I've tried calling the cardtitle id and class to add the class of collapse, but haven't had any luck. Does anyone have any ideas?
I was able to get it working by adding the following line item:
$("#undefined-clone-" + (targetCount + 1)).find('.cardtitle').hide();
drop
drop: function (event, ui) {
var dropId = ui.draggable.attr("id");
var targetCount = $(this).find("[id*='clone']").length;
var $dropElemClone = ui.draggable.clone();
$dropElemClone
.attr("id", dropId + "-clone-" + (targetCount + 1))
.appendTo(this)
.addClass("form-btn-wide")
.find(".elementHidden")
.removeClass("elementHidden");
$("#undefined-clone-" + (targetCount + 1)).find('.cardtitle').hide();
}
While running this HTML
<div class="container">
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<div id="container1">
<div class="dropEL col-6">
<p>Element 1</p>
</div>
<div class="dropEL col-6">
<p>Element 2</p>
</div>
</div>
</div>
<div class="col">
<div id="container2"></div>
</div>
</div>
</div>
</div>
</div>
and this JS
var currentParent;
$(".dropEL").draggable({
containment: "#container2",
grid: [ 20, 40 ],
snap: true,
start: function(){
currentParent = $(this).parent().attr('id');
}
});
$('#container1, #container2').droppable({
accept:'.dropEL',
drop: function(event,ui) {
if (currentParent != $(this).attr('id')) {
$(ui.draggable).appendTo($(this)).removeAttr('style');
}
$(this).find("div").on("click", function(e){
e.stopImmediatePropagation();
if($(this).hasClass("col-6")) {
$(this).find("p").css("background-color", "red");
$(this).removeClass("col-6").addClass("col");
} else {
$(this).find("p").css("background-color", "green");
$(this).removeClass("col").addClass("col-6");
}
});
}
});
I am able to drag and drop from container 1 to container 2 but i cannot drag and drop back to container 1. How could I?
CodePen here
Just change code as below
$(".dropEL").draggable({
containment: ".container",
grid: [ 20, 40 ],
snap: true,
start: function(){
currentParent = $(this).parent().attr('id');
}
});
you mentioned containment as #container2 that is the root cause.
Please find the Updated Code Pen:https://codepen.io/anon/pen/wqLvQB
i want to annimate 3 divs when the user scroll down the page, i followed many ttorials, it didn't work any suggestions how to do it, because the divs haz a defined css classes this is the divs . i wante them to fade up or down or any cool anniation how to acomplish this . please .
<section >
<div class="container">
<h1> PRODUITS </h1>
<div class="row">
<a href="pehdeauFrame.php">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">Tubes PEHD pour Eaux </h4>
<img id="imgeaudiv" src="assets/images/diveau.jpg">
</div>
</div>
</div>
</a>
<a href="pehdTelecomFrame.php">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">PEHD pour gaine Fibre Optique</h4>
<img id="imgeaudiv" src="assets/images/divtelecom.jpg">
</div>
</div>
</div>
</a>
<a href="http://www.mansouriplast.com/">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">Tubes PVC</h4>
<img id="imgeaudiv" src="assets/images/divpvc.jpg">
</div>
</div>
</div>
</a>
</div>
</div>
</section>
I suppose you can find out how to make it on this website:
https://css-tricks.com/aos-css-driven-scroll-animation-library/
This javascript will allow you to move a div.
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
and this will allow you to make an object appear (fade) on scroll:
$('.back-to-top').css({"display": "none"});
jQuery(document).ready(function() {
var offset = 25;
var duration = 300;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
So, what you may want is:
$('#mudivsho').css({"display": "none"});
jQuery(document).ready(function() {
var offset = 25; /* pixels you have to scroll to the div show up (fade) [you can change] */
var duration = 300; /* Duration of the fade (you can change) */
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('#mudivsho').fadeIn(duration);
} else {
jQuery('#mudivsho').fadeOut(duration);
}
});
jQuery('#mudivsho').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
See if this works.
you can animate like this.
$("document").ready(function(){
$(window).scroll(function(){
$("#mudivsho1").animate({left: "10%",top: "30%",width: "20%",height: "30%",margin: "0 10%"}, 500);
$("#mudivsho2").animate({left: "50%",top: "50%",width: "40%",height: "30%",margin: "0 20%"}, 500);
$("#mudivsho3").animate({left: "100%",top: "70%",width: "80%",height: "30%",margin: "0 30%"}, 500);
});
});
Demo: http://codesheet.org/cs/ZWLNfwqa
I am trying to use sortable() on divs and it's working fine, but I couldn't store the sorted divs and retrieve them for the user in the database.
here is my code:
<div class="row">
<div class="col-sm-3 col-xs-6 widget-container-col">
<div class="widget-box widget-color-blue" id="1">
<div class="widget-header">
<h4 class="widget-title">Japanese Yen</h4>
</div>
<div class="widget-body">
<div class="center bold bigger-300"><i class="fa fa-lg fa-jpy smaller-90 up-5"></i> {{ round($currencyWidget['price'], 2) }}</div>
<div class="center">as of {{ $currencyWidget['date'] }}</div>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6 widget-container-col">
<div class="widget-box widget-color-blue" id="2">
<div class="widget-header">
<h4 class="widget-title">Another Widget</h4>
</div>
<div class="widget-body">
<div class="center bold bigger-300">Test Widget</div>
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6 widget-container-col">
</div>
<div class="col-sm-3 col-xs-6 widget-container-col">
</div>
and Here is my jquery code:
$('.widget-container-col').sortable({
connectWith: '.widget-container-col',
items: '> .widget-box',
opacity: 0.8,
revert: true,
forceHelperSize: true,
placeholder: 'widget-placeholder',
forcePlaceholderSize: true,
tolerance: 'pointer',
start: function(event, ui){
ui.item.parent().css({'min-height': ui.item.height()})
},
update: function(event, ui) {
var data = $(this).sortable('serialize');
ui.item.parent({'min-height':''})
}
});
Any suggestions?
Thank you,
You can fetch the 'id' , 'index' map of sortable by iterating through all the items in sortable ,
$.map($(".widget-container-col > .widget-box "), function(element) {
return element.id + ' = ' + $(element).index();
});
Which will return you data in following form ,
["2 = 0", "1 = 1"]
See an example here
As for this ,
Also, once I save the data to the database, how would I load the page
after retrieving the data from the DB sorted the same way the user
stored it.
You should maintain the data in sorted order while fetching from database.