Connecting two draggeable, sortable objects - javascript

I have two elements that are connected one is a sidebar element and the other is a chart or object that represents the data. If the sidebar is reordered then the corresponding, connected object should be reordered with the sidebar element. That is the problem. Both objects will move together but will not resort or snap into place. They will just go back to their original position. I wan to be able to reorder the sidebar and the corresponding chart or object to be reordered on the page in the correct position. I will provide the code below:
$(document).ready(function() {
$( "#sortable" )
.sortable({ handle: ".handle", placeholder: "ui-state-highlight", helper: 'clone' })
.find("li")
.prepend("<div class='handle'><p >&#9776</p></div>" )
$( "#sortable" ).disableSelection();
});
$(document).ready(function() {
$('#sortable').click(function() {
var address = $('#sortable').val();
});
$(document).on('click', '.delete', function() {
$(this).parent().remove();
});
$(document).on('click')
});
$(document).ready(function(){
$('.move-up').click(function(){
if ($(this).prev())
$(this).parent().insertBefore($(this).parent().prev());
});
$('.move-down').click(function(){
if ($(this).next())
$(this).parent().insertAfter($(this).parent().next());
});
});
$(document).ready(function() {
// function to get matching groups (change '.group' and /group.../ inside the match to whatever class you want to use
var getAll = function(t) {
return $('.group' + t.helper.attr('class').match(/group([0-9]+)/)[1]).not(t);
};
// add drag functionality
$(".dragme").draggable({
snap: true,
revert: true,
containment: "#containment-wrapper",
axis:"y",
revertDuration: 10,
});
<input class="input btn-info" id='toggle' name='toggle' type="button" value="<">
<div id="draggable">
<ul id="sortable">
<div class="dragme group1"><li id="item-1" class="ui-state-default">Executive Summary
<button class="delete btn-danger" ><p class="icon-remove"></p></button>
<button class="move-up btn-info"><p class="icon-chevron-up"></p></button><br />
<button class="move-down btn-info"><p class="icon-chevron-down"></p></button>
</li></div>
<div class="dragme group2"><li id="item-2" class="ui-state-default">Company Performance<button class="delete btn-danger"><p class="icon-remove"></p></button>
<button class="move-up btn-info"><p class="icon-chevron-up"></p></button> <br />
<button class="move-down btn-info"><p class="icon-chevron-down"></p></button>
</li></div>
<div class="span10" id="draggable" style="float: right; width: 75%;">
<div class="row-fluid" ><div class="dragme group1">
<div class="span3"><div class="box style2"><span class="number">115,925</span><p>Total Impressions</p></div></div>
<div class="span3"><div class="box style2"><span class="number">1,100</span><p>Total Clicks</p></div></div>
<div class="span3"><div class="box style2"><span class="number">102</span><p>Total Leads</p></div></div>
<div class="span3"><div class="box style2"><span class="number">7.2%</span><p>Overall Conversions</p></div></div>
</div></div>
<div class="dragme group2"><div class="tab-content" id="white-bg">
<div class="tab-pane active" id="impressions">
<div id="chart_div" style=" width: 900px; height: 400px;"> </div>
</div>
</div>
</div>

Related

Can't succeed in dragging and dropping elements from one div to the other separately

I wish to create two containers with the first containing elements to be dragged and dropped to the second when the user wishes. I actually succeed in displaying the two containers with the respective elements, but when I try dragging one of them to the second container separately, the whole block moves on.
Below is my code :
$(document).ready(function () {
$('.box-item').draggable({
cursor: 'move',
helper: "clone"
});
$("#container1").droppable({
drop: function (event, ui) {
var itemid = $(event.originalEvent.toElement).attr("itemid");
$('.box-item').each(function () {
if ($(this).attr("itemid") === itemid) {
$(this).appendTo("#container1");
}
});
}
});
$("#container2").droppable({
drop: function (event, ui) {
var itemid = $(event.originalEvent.toElement).attr("itemid");
$('.box-item').each(function () {
if ($(this).attr("itemid") === itemid) {
$(this).appendTo("#container2");
}
});
}
});
});
/* Styles go here */
.box-container {
height: 200px;
}
.box-item {
width: 100%;
z-index: 1000
}
<div class="row">
<div class="col-lg-11">
<div class="row">
<div class="col-lg-12">
#using (Html.BeginForm("", "", FormMethod.Post, new { id = "formAssignVehicles" }))
{
<fieldset>
<legend>Affecter des voitures par glisser-déposer</legend>
#{ }
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Liste des véhicules</h3>
</div>
<div id="container1" class="panel-body box-container">
#foreach (var voiture in Model.ListeVoituresAffectees)
{
<div itemid="itm-1" class="btn btn-default box-item">
#Html.DisplayFor(model => voiture.MarqueVoiture.Libelle)
</div>
}
</div>
</div>
</div>
<div class="col-xs-3">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Liste des véhicules affectées</h3>
</div>
<div id="container2" class="panel-body box-container"></div>
</div>
</div>
<input type="button" value="Affecter les voitures" />
</fieldset>
}
</div>
</div>
</div>
</div>
Can't figure out where's the typo. Kindly help, please!
In your #foreach statement, all the elements are being given the same itemid "itm-1" so they are all affected the same way. Find a way to give each a unique itemid and that should solve the problem.

jQuery-ui weird behavior with sortable after an element is dropped

I'm building a system that would allow a user to drag and drop elements from a dragzone to a dropzone. Once dropped, the elements are cloned "back" to their origin. Also, the user can sort the elements dropped as he wants.
I had a first issue where I couldn't clone the block I dragged, but I could sort it when it was dropped. Now that I fixed the clone problem, if I try to sort the elements, the elements moving come from the dragzone and I can't understand why.
Here is the HTML:
<div class="container-fluid">
<div class="row">
<div class="card col-3">
<div class="card-body">
<div class="card draggable-element" data-target="textarea">
<div class="card-body">
This is some text within a card body. 1
</div>
</div>
<div class="card draggable-element" data-target="textfield">
<div class="card-body">
This is some text within a card body. 2
</div>
</div>
<div class="card draggable-element" data-target="fileinput">
<div class="card-body">
This is some text within a card body. 3
</div>
</div>
</div>
</div>
<div class="card col-6 offset-1">
<div class="card-body dropzone">
</div>
</div>
</div>
</div><!-- /.container -->
And here is the JS:
$(document).ready(function() {
$('.draggable-element').draggable({
revert: 'invalid',
appendTo: '.dropzone',
helper: 'clone'
});
$('.dropzone').droppable({
drop: function (event, ui) {
// With the following code, the elements won't get cloned
var item = $(ui.draggable);
if(!item.hasClass('copy')) {
item.clone().addClass('copy');
item.draggable({
revert: 'invalid',
stack: ".draggable",
helper: 'clone'
})
}
else {
$(this).append($(ui.helper).clone());
}
$(this).append(item);
}
})
.sortable();
});
/*
drop: function (event, ui) {
// With the following code, the elements getting sorted are
// the div.draggable-element from the div.card.col-3
$(ui.draggable).clone(true).detach().css({
position: 'relative',
top: 'auto',
left: 'auto'
}).appendTo(this);
}
*/
I haven't used jquery-ui for a while so I can't find what may be obvious, I tried to mix the code together but it didn't end up well at all.
Thank you in advance
OK, this is likely NOT a full answer ( but the markup had an odd "card-body" holder of cards so I renamed that to test. Does Not "clone" as was represented in the question...so it sorts in my example but not sure this totally reproduces/resolves here. I updated the "clone" part but not sure it is what you desire.
$(document).ready(function() {
$('.draggable-element').draggable({
revert: 'invalid',
appendTo: '.dropzone',
helper: 'clone'
});
$('.dropzone').droppable({
drop: function(event, ui) {
// With the following code, the elements won't get cloned
var item = $(ui.draggable);
// hide to not obscure console.log(item.length);
if (!item.hasClass('copy')) {
var newy = item.clone(false);
newy.addClass('copy');
//console.log(newy);
newy.draggable({
revert: 'invalid',
stack: ".draggable",
helper: 'clone'
});
} else {
$(this).append(item);
}
$('.dropzone').append(newy);
// $(this).append(item);
}
})
.sortable();
});
.cards,
.dropzone {
border: solid red 1px;
height: 5em;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="card col-3">
<div class="cards">
<div class="card draggable-element" data-target="textarea">
<div class="card-body">
This is some text within a card body. 1
</div>
</div>
<div class="card draggable-element" data-target="textfield">
<div class="card-body">
This is some text within a card body. 2
</div>
</div>
<div class="card draggable-element" data-target="fileinput">
<div class="card-body">
This is some text within a card body. 3
</div>
</div>
</div>
</div>
<div class="card col-6 offset-1">
<div class="card-body dropzone">
</div>
</div>
</div>
</div>

How to pass content to the next tab by jQuery?

I'm a beginner at jQuery. I would like to create selectable portlet, and when it was clicked then showed the same portlet in the second tab immediately.
This is my JavaScript Code.
$(function () {
$(".frame").sortable({
connectWith: ".frame",
handle: ".portlet-header",
placeholder: "portlet-placeholder ui-corner-all"
});
$(".portlet")
.addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
$(".portlet-toggle").click(function () {
var icon = $(this);
icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
icon.closest(".portlet").find(".portlet-content").toggle();
});
});
$(function () {
$(".frame").selectable({
stop: function () {
var result = $("#select-result").empty();
var add = $("#newExam").empty();
var count = 0;
$(".ui-selected", this).each(function () {
if (this.id > 0) {
result.append(this.id + " ");
count = count + 1;
}
});
add.append(count);
}
});
});
And this is my HTML code.
<div id="tabs">
<ul>
<li>Master</li>
<li>Add List <span id="newExam" class="badge" >0</span> </li>
</ul>
<div id="master" class="master">
<p>exam in the collection</p>
<br /><br />
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<div class="frame" style="align-content: center">
<div class="portlet portlet-count" id="1">
<div class="portlet-header">First</div>
<div class="portlet-content">test</div>
</div>
<div class="portlet portlet-count" id="2">
<div class="portlet-header">Second</div>
<div class="portlet-content">test</div>
</div>
<div class="portlet portlet-count" id="3">
<div class="portlet-header">Third</div>
<div class="portlet-content">test</div>
</div>
</div>
</div>
<div id="creation">
</div>
P.S. Master is the first tab, Creation is the second tab.

Problems with open dialog when double click

When I add a card in in-box list I am able, when double click on it, to open dialog. It works fine. The problem comes when I drag the card and drop it in Onhold list. I tried to double click to open the dialog but did not succeed.
ANY IDEA FOR A SOLUTION?
Demo
HTML:
<!--Wrapper div-->
<div id="wrapper">
<div id="onHoldList" class="cellContainer">
<p>On Hold</p>
</div>
<!--Inbox list and button to add a card-->
<div id="inboxList" class="cellContainer">
<p style="display: inline">Inbox</p>
<!--Button to add a Card-->
<input type="button" id="AddCardBtn" value="+ Add a Card..."/> <hr class="fancy-line"/> <br/>
<!--Card div-->
<div id="userAddedCard"> <br/>
<div>
</div>
</div>
</div>
</div>
<!--Modal Dialog-->
<div id="modalDialog">
<form>
<label>Title</label>
<input type="text" id="customTextBox" value="some value"/>
<p>Date: <input type="text" id="datepicker" value="some date"/></p>
<input type="button" id="Getbtn" value="Get value"/> <hr/><br/>
</form>
</div>
JQuery:
$(function () {
// Click function to add a card
var $div = $('<div />').addClass('sortable-div');
$('<label>Title</label><br/>').appendTo($div);
$('<input/>', { "type": "text","class":"ctb"}).appendTo($div);
$('<input/>', { "type": "text","class":"date"}).appendTo($div);
var cnt =0,$currentTarget;
$('#AddCardBtn').click(function () {
var $newDiv = $div.clone(true);
cnt++;
$newDiv.prop("id","div"+cnt);
$('#userAddedCard').append($newDiv);
// alert($('#userAddedCard').find("div.sortable-div").length);
});
// Double click to open Modal Dialog Window
$('#userAddedCard').dblclick(function (e) {
$currentTarget = $(e.target);
$('#modalDialog').dialog({
modal: true,
height: 600,
width: 500,
position: 'center'
});
return false;
});
$("#datepicker").datepicker({showWeek:true, firstDay:1});
$("#Getbtn").on("click",function() {
var val = $("#customTextBox").val();
$currentTarget.find(".ctb").val(val);
$currentTarget.find(".date").val($("#datepicker").val() );
$('#modalDialog').dialog("close");
});
// Sortable cards
$('.cellContainer').sortable({
items: '.sortable-div',
containment: 'document',
cursor: 'crosshair',
opacity: '0.70',
connectWith: '.cellContainer',
}).disableSelection();
});
Div moved to onhold list is not a child of #userAddedCard anymore.
Change
$('#userAddedCard').dblclick(function (e) {
with
$('#wrapper').on('dblclick', '.sortable-div', function (e) {

drag and drop working funny when using variable draggables and droppables

i have some containers that contain some divs like:
<div id="container1">
<div id="task1" onMouseOver="DragDrop("+1+");"> </div>
<div id="task2" onMouseOver="DragDrop("+2+");"> </div>
<div id="task3" onMouseOver="DragDrop("+3+");"> </div>
<div id="task4" onMouseOver="DragDrop("+4+");"> </div>
</div>
<div id="container2">
<div id="task5" onMouseOver="DragDrop("+5+");"> </div>
<div id="task6" onMouseOver="DragDrop("+6+");"> </div>
</div>
<div id="container3">
<div id="task7" onMouseOver="DragDrop("+7+");"> </div>
<div id="task8" onMouseOver="DragDrop("+8+");"> </div>
<div id="task9" onMouseOver="DragDrop("+9+");"> </div>
<div id="task10" onMouseOver="DragDrop("+10+");"> </div>
</div>
i'm trying to drag tasks and drop them in one of the container divs, then reposition the dropped task so that it doesn't affect the other divs nor fall outside one of them
and to do that i'm using the event onMouseOver to call the following function:
function DragDrop(id) {
$("#task" + id).draggable({ revert: 'invalid' });
for (var i = 0; i < nameList.length; i++) {
$("#" + nameList[i]).droppable({
drop: function (ev, ui) {
var pos = $("#task" + id).position();
if (pos.left <= 0) {
$("#task" + id).css("left", "5px");
}
else {
var day = parseInt(parseInt(pos.left) / 42);
var leftPos = (day * 42) + 5;
$("#task" + id).css("left", "" + leftPos + "px");
}
}
});
}
}
where:
nameList = [container1, container2, container3];
the drag is working fine, but the drop is not really, it's just a mess!
any help please??
when i hardcode the id and the container, then it works beautifully, but as soon as i use id in drop then it begins to work funny!
any suggestions???
thanks a million in advance
Lina
Consider coding it like this:
<div id="container1" class="container">
<div id="task1" class="task">1 </div>
<div id="task2" class="task">2 </div>
<div id="task3" class="task">3 </div>
<div id="task4" class="task">4 </div>
</div>
<div id="container2" class="container">
<div id="task5" class="task">5 </div>
<div id="task6" class="task">6 </div>
</div>
<div id="container3" class="container">
<div id="task7" class="task">7 </div>
<div id="task8" class="task">8 </div>
<div id="task9" class="task">9 </div>
<div id="task10" class="task">10 </div>
</div>
$(function(){
$(".task").draggable({ revert: 'invalid' });
$(".container").droppable({
drop: function (ev, ui) {
//process dropped item
}
});
})

Categories