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();
}
Related
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>
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 am trying to simplify my code but running into issues where it is not working when it place in an each loop.
Here is what I am trying to do:
- html has n parent DIV that generates a report via an AJAX call to pull data
- each div respective to report utilizes a data attribute to define which report to pull
- based no the results of the report, it should populate the html with the respective results.
HTML Code (to simplify, using n = 2):
<div class="widget-box widget-hits card no-border bg-white no-margin" data-widget-report="widget-hits">
<div class="container-xs-height full-height">
<div class="row-xs-height">
<div class="col-xs-height col-top">
<div class="card-header top-left top-right">
<div class="card-title text-black hint-text">
<span class="font-montserrat fs-11 all-caps">Weekly Hits
<i class="far fa-chevron-right p-l-5"></i>
</span>
</div>
<div class="card-controls">
<ul>
<li>
<a data-toggle="refresh" class="card-refresh text-black" href="#">
<i class="far fa-circle fa-xs"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row-xs-height ">
<div class="col-xs-height col-top relative">
<div class="row">
<div class="col-sm-6">
<div class="p-l-20 widget-total">
<h3 class="no-margin p-b-5"></h3>
<p class="small hint-text m-t-5">
<span class="label m-r-5">%</span>
</p>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="widget-chart"></div>
</div>
</div>
</div>
</div>
<div class="widget-box widget-sales card no-border bg-white no-margin" data-widget-report="widget-sales">
<div class="container-xs-height full-height">
<div class="row-xs-height">
<div class="col-xs-height col-top">
<div class="card-header top-left top-right">
<div class="card-title text-black hint-text">
<span class="font-montserrat fs-11 all-caps">Weekly Sales
<i class="far fa-chevron-right p-l-5"></i>
</span>
</div>
<div class="card-controls">
<ul>
<li>
<a data-toggle="refresh" class="card-refresh text-black" href="#">
<i class="far fa-circle fa-xs"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row-xs-height ">
<div class="col-xs-height col-top relative">
<div class="row">
<div class="col-sm-6">
<div class="p-l-20 widget-total">
<h3 class="no-margin p-b-5"></h3>
<p class="small hint-text m-t-5">
<span class="label m-r-5">%</span>
</p>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="widget-chart"></div>
</div>
</div>
</div>
</div>
JS:
$('.widget-box').each(function() {
$widget_report = $(this).data('widget-report');
if ($widget_report !== undefined) {
$.ajax({
type: 'get',
url: '/admin/reports/' + $widget_report,
dataType: 'json',
success:
function(data) {
if (data.success) {
var labelsData = [];
var seriesData = [];
var trend = data.trend * 100;
widget_class = '.' + $widget_report + ' .widget-chart';
console.log(widget_class);
$(this).find('.widget-total h3').text(data.total);
$(this).find('.widget-total p span').text(trend + '%');
trend_span = $(this).find('.widget-total p').children('span');
if(data.trend > 0) {
$(this).find('.widget-total p span.label').addClass('label-success');
$(this).find('.widget-total p').text('Higher');
}
else {
$(this).find('.widget-total p span.label').addClass('label-important');
$(this).find('.widget-total p').text('Lower');
}
$(this).find('.widget-total p').prepend(trend_span);
$.each(data.values, function(key, value){
date = new Date(value.label + 'T00:00:00');
labelsData.push(date.getMonth() + 1 + '/' + date.getDate());
seriesData.push(value.value);
});
chartData = {
labels: labelsData,
series: [seriesData]
}
alert(widget_class);
new Chartist.Bar(widget_class, chartData, {
axisX: {
showGrid: false
},
axisY: {
showGrid: false,
showLabel: false
}
});
}
}
});
}
});
Here are the problems I've encountered:
$(this).find('.widget-total h3').text is not updating the respective DIV group
widget_class for some reason is always returning the last DIV group... even if the last DIV group was returning data.success = false. Ex: above would return widget-sales twice and not widget-hits and then widget-sales.
I am scratching my head on this one... I am able to get this to work without the .each loop and distinctively create one for each... but was hoping to make this universal and allow the control rely on the data-widget-report attribute on the html.
Is this the proper approach?
Any help / direction is appreciated...
Add var in front of widget_class and $widget_report so they are scoped to the function instead of global. I think that will fix your problem. Right now $widget_report gets replaced by the last widget even before the ajax calls are completed.
As for the $(this) not working, you have to assign it to a variable before you make the ajax call.
$('.widget-box').each(function() {
var widgetBoxElement = $(this);
var $widget_report = $(this).data('widget-report');
if ($widget_report !== undefined) {
$.ajax({
type: 'get',
url: '/admin/reports/' + $widget_report,
dataType: 'json',
success:
function(data) {
if (data.success) {
// use widgetBoxElement here instead of $(this)
}
}
});
}
});
I'm newbie in bootstrap and jquery, using the code below to create many bootstrap panels, my problem is that I would like to close the others panels when i click in full size icon of one panel
someone know how can do it?
thank you
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title"> Panel Widget Title
<div class="pull-right"> <i class="fa fa-times"></i> <i class="fa fa-minus"></i> </div>
</h4>
</div>
<div class="panel-wrapper collapse in">
<div class="panel-body"> Panel Widget Body </div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title"> Panel Widget Title
<div class="pull-right"> <i class="fa fa-times"></i> <i class="fa fa-minus"></i> </div>
</h4>
</div>
<div class="panel-wrapper collapse in">
<div class="panel-body"> Panel Widget Body </div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title"> Panel Widget Title
<div class="pull-right"> <i class="fa fa-times"></i> <i class="fa fa-minus"></i> </div>
</h4>
</div>
<div class="panel-wrapper collapse in">
<div class="panel-body"> Panel Widget Body </div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
(function($, window, document){
var panelSelector = '[data-perform="panel-collapse"]';
$(panelSelector).each(function() {
var $this = $(this),
parent = $this.closest('.panel'),
wrapper = parent.find('.panel-wrapper'),
collapseOpts = {toggle: false};
if( ! wrapper.length) {
wrapper =
parent.children('.panel-heading').nextAll()
.wrapAll('<div/>')
.parent()
.addClass('panel-wrapper');
collapseOpts = {};
}
wrapper
.collapse(collapseOpts)
.on('hide.bs.collapse', function() {
$this.children('i').removeClass('fa-minus').addClass('fa-plus');
})
.on('show.bs.collapse', function() {
$this.children('i').removeClass('fa-plus').addClass('fa-minus');
});
});
$(document).on('click', panelSelector, function (e) {
e.preventDefault();
var parent = $(this).closest('.panel');
var wrapper = parent.find('.panel-wrapper');
wrapper.collapse('toggle');
});
}(jQuery, window, document));
(function($, window, document){
var panelSelector = '[data-perform="panel-dismiss"]';
$(document).on('click', panelSelector, function (e) {
e.preventDefault();
var parent = $(this).closest('.panel');
removeElement();
function removeElement() {
var col = parent.parent();
parent.remove();
col.filter(function() {
var el = $(this);
return (el.is('[class*="col-"]') && el.children('*').length === 0);
}).remove();
}
});
}(jQuery, window, document));
});
</script>
JSFIDDLE link
Bootstrap provides collapse.js to do the same.
here is the reference: Bootstrap.
or go to fiddle
you just need to do this:
$('.panel-title a').collapse();
since your question is little vague, I am not clear about your requirement.
please have a look on to this code. I think this might be you a re asking
fiddled here
HTML
//Same as in you code, java script part is not needed
JQUERY
$(document).ready(function () {
$(".panel-heading").click(function () {
$(this).closest(".panel").find(".panel-body").toggleClass("hide");
});
$(".fa.fa-times").click(function(){
$(".panel-body").addClass("hide");
$(this).parent(".panel").find(".panel-body").removeClass("hide");
});
});
EDIT
check updated fiddle
I'm using JQuery-UI draggable to move an element around. The things is when I drag an element to the right, the underlying list of elements gets dragged to the left!
Here is the DOM of the rendered list:
<div id="result" class="list-group">
<div class="list-group" data-reactid=".0">
<a id="sink" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$1etg">
<h4 class="list-group-item-heading" data-reactid=".0.$1etg.$14dd">
<i class="fa fa-star" data-reactid=".0.$1etg.$14dd.$1crq">Spout</i>
</h4>
<p class="list-group-item-text" name="Spout" data-reactid=".0.$1etg.$24yv">Data source</p>
</a>
<a id="forex" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$1mfb">
<h4 class="list-group-item-heading" data-reactid=".0.$1mfb.$1epm">
<i class="fa fa-dollar" data-reactid=".0.$1mfb.$1epm.$1b42">Composable type</i>
</h4>
<p class="list-group-item-text" name="Composable type" data-reactid=".0.$1mfb.$210d">Composable type</p>
</a>
<a id="read_portfolio" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$k4i">
<h4 class="list-group-item-heading" data-reactid=".0.$k4i.$a1i">
<i class="fa fa-search" data-reactid=".0.$k4i.$a1i.$mqj">Read portfolio</i>
</h4>
<p class="list-group-item-text" name="Read portfolio" data-reactid=".0.$k4i.$1pqw">Read a portfolio</p>
</a>
<a id="constituents_valuation" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$11ub">
<h4 class="list-group-item-heading" data-reactid=".0.$11ub.$1r31">
<i class="fa fa-cogs" data-reactid=".0.$11ub.$1r31.$1omt">Constituents valuation</i>
</h4>
<p class="list-group-item-text" name="Constituents valuation" data-reactid=".0.$11ub.$bca">Compute the valuation of constituents</p>
</a>
<a id="get_constituents" href="#" class="list-group-item ui-draggable ui-draggable-handle" data-reactid=".0.$n2d">
<h4 class="list-group-item-heading" data-reactid=".0.$n2d.$jho">
<i class="fa fa-eye" data-reactid=".0.$n2d.$jho.$nn1">Portfolio constituents</i>
</h4>
<p class="list-group-item-text" name="Portfolio constituents" data-reactid=".0.$n2d.$1870">Get the constituents of a portfolio</p>
</a>
</div>
</div>
Here is how the plugin is used:
$(".list-group-item").draggable({
cursor: "move",
cursorAt: { top: -10, left: -10 },
helper: function (event) {
var coords = getCrossBrowserElementCoords(event);
var id = event.currentTarget.getAttribute('id');
// draw a temporary element
dragged = $.extend({}, $scope.components[id]);
dragged['id'] = id + '-' + randomKey();
dragged['x'] = coords.x;
dragged['y'] = coords.y;
dragged['selected'] = true;
$rootScope.$broadcast(Config.events.add_node, dragged);
return $("<div class='fa fa-" + dragged.icon + "' style='font-size:xx-large'></div>");
},
// Triggerent on mouse move while holding the item
drag: function(event, element) {
//TODO trigger add_node event
var coords = getCrossBrowserElementCoords(event);
dragged['x'] = coords.x;
dragged['y'] = coords.y;
$rootScope.$broadcast(Config.events.update_node, dragged);
},
// Triggered once a the mouse is released
stop: function(event, element) {
var coords = getCrossBrowserElementCoords(event);
// if within the slider then remove the temporary node
var width = parseInt($("#sidebar-wrapper").css('width'), 10);
if(coords.x < width) {
$rootScope.$broadcast(Config.events.remove_node, dragged);
}
dragged = null;
}
});
The rendered clone is appended to the end of list-group.
Below is how it looks like, Any pointer to the issue will be welcome.
maybe it has to do with Cursor At? I think when you first start the drag, Jquery UI will move the helper element to the specified location in Cursor At, creating the illusion of it jumping left?
I fixed the problem by using appendTo attribute of draggable to attach the element to the #result parent, and then controlling when it is hidden or shown in drag function.