I have some nested sortables, but when I try and move them around it has issues.
Sometimes it jumps around, and sometimes it tries to drop it above the parent instead of inside the box.
Anyway to make it consistent and work correctly?
Also when I set the tolerance mode to pointer it becomes impossible to drop it inside a child sortable.
http://jsfiddle.net/tFY59/4/
<div class="wrapper">
<div class="row">
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
</div>
</div>
$('.wrapper, .box').sortable({
connectWith: '.wrapper, .box',
//tolerance: 'pointer',
placeholder: 'placeholder ui-state-highlight ui-corner-all',
forcePlaceholderSize: true,
cursorAt: {
left: -10
},
start: function() {
$('.placeholder').append('<span>Move here...</span>');
}.bind(this)
});
Related
I'm using jQuery UI sortable to allow user to drag and drop between two lists and then order the items, but I have an error where when selecting from the first list, the content selected it's not the entire div, just the content on behind the mouse cursor.
Following this, many errors occurs, like I'm not able to order, to move back to the first list and everything can't be undone.
Here's the view code:
<div class="row col-md-12">
<div class="col-md-6">
#foreach (var item in Model.Games.AvailableGamesStats.GameAchievements.Where(f => f.SectionID == null))
{
<div class="connectedSortable" id="achievements" style="margin-top:10px; margin-bottom:10px; z-index:1; cursor:move; height:60px">
<img src="#item.Icon" style="float:left" />
<b>#item.DisplayName</b><br />
<i>#item.Description</i>
#if (item.Difficulty != null)
{
<img src="#item.Difficulty.DifficultyImage" style="float:right; width:32px" />
}
</div>
}
</div>
<div class="col-md-6">
<div class="card" style="height:100%; z-index:0">
<div class="card-header text-center" contenteditable="true">Name</div>
<div class="card-body connectedSortable" id="chievo">
</div>
</div>
</div>
and jQuery...
$(function () {
$("#chievo, #achievements").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
The first div items that I'm trying to move, are a collection of image, title and description, but when I try to move, only one item moves, and can't order or undo anything.
I'm using semantic-ui and i'm having a problem with the sticky component.
I can get it to work in a normal page but I can't get it to work in a modal window.
I'm using :
HTML:
<div class="ui modal">
<div class="header">Title</div>
<div class="scrolling content">
<div class="ui sticky">
... content I want to have stick ...
</div>
JS:
$('.ui.sticky')
.sticky('refresh')
;
$('.ui.sticky')
.sticky({
type: 'fixed',
offset: 200
})
;
You're initializing sticky behavior before the element is even visible yet, cause you're using modal , to prevent that from happening, use onVisible callback to start sticky behavior like the following :
[DEMO]
JS(jQuery)
$( document ).ready(function() {
$('.ui.modal').modal('show').modal({
onVisible:$('.ui.sticky').sticky({
type: 'fixed',
offset: 200
}).sticky('refresh')
});
});
HTML
<div class="ui modal">
<div class="header">Title</div>
<div class="scrolling content" style="min-height:1000px">
<div class="ui sticky"> ... content I want to have stick ... </div>
</div>
</div>
I'm creating an interface so users can drag and drop elements, but also sort them afterwards. The drag / drop / sort functions work smoothly, however, when I'm trying to sort the dropped elements in the "dropzone", instead of the element I'm trying to drag, it's the element source that is moving. It took some times but I figured out that it's because of .clone(true) or .clone(false) that this kind of things could happen. So I decided to remove it but now the elements that are in the sorting div seem.. broken.
Here is the HTML (bootstrap 4 context) :
<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>
And this is the JS :
$(document).ready(function() {
$('.draggable-element').draggable({
revert: 'invalid'
, appendTo: '.dropzone'
, helper: 'clone'
});
$('.dropzone').droppable({
drop: function(event, ui) {
var item = $(ui.draggable);
if (!item.hasClass('copy')) {
var newy = item.clone(true, true);
newy.addClass('copy');
//console.log(newy);
newy.draggable({
revert: 'invalid'
, stack: ".draggable"
});
} else {
$(this).append(item);
}
$('.dropzone').append(newy);
}
}).sortable({
axis: 'y'
, revert: true
, refreshPositions: true
, placeholder: 'placeholder'
, items: '.copy'
, forcePlaceholderSize: true
});
});
So with parameters inside .clone(), whichever they are, most of the time, when I drag a cloned element, the original is moving instead, but sometimes it works, and I have no clue why. Without parameters, the good element is dragged but there is no notion of stacking and sorting, the element stays where I dropped it and the others kind of adapt their position to its.
Is there anyway to resolve this kind of issue?
Thank you in advance
You don't need to droppable and sortable method is enough because it's draggable and sortable. So you can do it like this:
$('.dropzone').sortable();
$('.draggable-element').draggable({
connectToSortable: '.dropzone',
revert: 'invalid',
helper: 'clone'
});
Online demo (jsFiddle)
If you want move element "draggable-element", you must set as dragable "zone" card-body (higher tag). But this tag you are have twice in your html code.
Check my live example.
Live demo
<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>
<div class="card col-6 offset-1">
<div class="card-bodyX dropzone">
...
</div>
</div>
$(document).ready(function() {
$('.card-body').draggable({
revert: 'invalid',
connectToSortable: '.dropzone',
scroll: false,
helper: 'clone'
});
$('.dropzone').sortable({
distance: 0,
});
});
Unfortunately, I am not able to get this working in jsfiddle but maybe I overlooked something (http://jsfiddle.net/bJpyU/46/). I have blocks dynamically created and need to save the order that they are placed. Because of the dynamic fashion that this is set up, I am not able to get the index (it's always 0, and the block starting first always shows as first index wise regardless of where it is dragged). toArray and serialize are showing up as blank. I've even tried counting nth-child. Any idea how to get the order?
HTML
<div class="tab-pane active col-lg-12" id="portlet_tab_Graphs">
<div class="row padLR sortable_portlets" id="sortable_portlet_Graphs">
<div class="col-lg-4 sortable sortable_portlet_Graphs_column ui-sortable" id="102">
<div class="portlet box yellow">
<div class="portlet-title">Monthly License Revenue</div>
</div>
<div class="portlet-body clearfix pad">
<div id="h1_sortable_portlet_Graphs_102"></div>
<div id="sortable_portlet_Graphs_102">
<div class="col-lg-12 nPad">
<div class="btn-group chartToggle inline">Graph Data</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 sortable sortable_portlet_Graphs_column ui-sortable" id="103">
<div class="portlet box blue">
<div class="portlet-title">Yearly License Revenue</div>
</div>
<div class="portlet-body clearfix pad">
<div id="h1_sortable_portlet_Graphs_102"></div>
<div id="sortable_portlet_Graphs_102">
<div class="col-lg-12 nPad">
<div class="btn-group chartToggle inline">Graph Data</div>
</div>
</div>
</div>
</div>
</div>
</div>
JQUERY
var sortdiv = "Graphs"
var blockClasses = "col-lg-4";
$(".sortable_portlet_" + sortdiv[2] + "_column").sortable({
connectWith: ".sortable_portlet_" + sortdiv[2] + "_column",
handle: ".portlet-title",
//placeholder: "dragColumn",
forceHelperSize: true,
forcePlaceholderSize: true,
start: function (e, ui) {
ui.placeholder.height(ui.helper.outerHeight());
ui.placeholder.width(ui.helper.outerWidth());
// get original block size
blockClasses = ui.item.parent().attr('class');
},
stop: function (e, ui) {
var parent = ui.item.parent();
blockWidth = blockClasses.split(" ");
parent.attr('class', function (i, c) {
return c.replace(/(^|\s)col-lg-\S+/g, blockWidth[0]);
});
//console.log(ui.position)
SavePortletDrop(sortdiv[2]);
}
});
I think the error is actually from attaching sortable to each individual item that you're sorting. It should be attached to a container div.
So, even though it looked like it was working, you were actually moving around a bunch of 1-item lists, which are always at index 0.
I got it to work like I think you want it by attaching sortable to the #sortable_portlet_Graphs. This makes ui.item.index() return the number you'd expect in the stop function.
http://jsfiddle.net/bJpyU/47/
I have a widget-like system with widgets that are able to be dragged around (with jQuery draggable/sortable). The problem is now that when a user drags one of those widgets and moves the cursor on the edge, the parent div scrolls to the direction of the cursor.
A simplified layout is as follows:
<div id="wrapper" style="width:WINDOW_WIDTH;">
<div id="page_wrapper" style="width:10000px;">
<div class="widget_page" style="width:WINDOW_WIDTH;">
<div class="widget draggable"></div>
<div class="widget draggable"></div>
<div class="widget draggable"></div>
</div>
<div class="widget_page" style="width:WINDOW_WIDTH;">
<div class="widget draggable"></div>
<div class="widget draggable"></div>
<div class="widget draggable"></div>
</div>
</div>
</div>
is there any way i can disable the page_wrapper from scrolling?
Try to add overflow:hidden; in the css of the page_wrapper.
just add css property "position as a static" on parent div for which you set the scrollbar.
$("selector").css("position","static");
ex.
$('.bottomSentences').draggable({
cursor: 'move',
helper: 'clone',
start: function(e, ui)
{
$(ui.helper).addClass("ui-draggable-helper");
$("#splitSentencesDiv").css("position","static");
}
});
here in ex. splitSentencesDiv is my Div for which i set the scroll. by default its position value is relative set by bootstrap col- class.