My element styling depends on the element order. Since jQuery UI keeps the original item while dragging a helper hidden, the hidden element breaks the styling. I can remove the ui.item upon starting the drag event. Though, how can I restore the element after it was removed?
http://jsfiddle.net/MnSRd/8/
HTML
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS
ul { height: 50px; }
li { float: left; width: 50px; height: inherit; background: #ccc; margin: 0 10px 0 0; }
li.placeholder { background: #f00; }
li:nth-child(1):before { content: '1'; }
li:nth-child(2):before { content: '2'; }
li:nth-child(3):before { content: '3'; }
li:nth-child(4):before { content: '4'; }
li:nth-child(5):before { content: '5'; }
JavaScript
$('ul').sortable({
helper: 'clone',
placeholder: 'placeholder',
start: function (e, ui) {
console.log(ui.item.remove()); // temporary remove
},
beforeStop: function (e, ui) {
// how to bring the item back?
}
});
You can first hide() the item and then show() it again. remove() completely removes it from the DOM so you cannot restore it unless you clone() it and then you attach it back or simply use jQuery detach() Updated fiddle.
$('ul').sortable({
helper: 'clone',
placeholder: 'placeholder',
start: function (e, ui) {
ui.item.hide(); // temporary remove
},
beforeStop: function (e, ui) {
ui.item.show();
}
});
After reading the comments I believe that what you want from the sortable is to use helper: 'original' which is the default helper instead of helper: 'clone'.
While this might not be an answer to everyone, it will likely solve any similar issues.
$('ul').sortable({
helper: 'clone',
placeholder: 'placeholder',
start: function (e, ui) {
ui.item.appendTo(ui.item.parent());
}
});
http://jsfiddle.net/MnSRd/11/
Instead of removing the UI element, I am appending it to the end of the parent container. Thus it does not have any effect on the element styling.
Related
I'm facing a trouble with droppable/draggable plugin of Jquery UI.
If I have two elements, not-nested, but overlapped due to css structure, the drop function is thrown for both elements.
How can I prevent to the background element to get the drop?
This is an example:
https://jsfiddle.net/vq4x0b8L/2/
HTML
<div id="contenitore">
<div id="carrello">
<p>Drop here</p>
</div>
<div id="carrello2">
<p>Drop here</p>
</div>
<div id="fagioli">
<p>Drag me</p>
</div>
</div>
JS
$(function() {
$( "#fagioli" ).draggable();
$( "#carrello" ).droppable({
greedy: true,
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped." );
}
});
$( "#carrello2" ).droppable({
greedy: true,
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped." );
}
});
});
CSS
#contenitore {position: relative; width: 500px; height: 500px;}
#carrello {background: #ccc;width:400px;height:500px;}
#carrello2 {background: #ddd; width:300px;height:250px; position: absolute; bottom: 0px;}
#fagioli {background: #822222;width:70px;height:90px;position: absolute; top: 200px; right: 10px;}
#fagioli:hover {cursor:move}
I tried the "greedy" option, but it doesn't work, probably it is designed for nested elements.
I found a way to do it.
Example: https://jsfiddle.net/Twisty/dezt5bmf/10/
JavaScript
$(function() {
$("#fagioli").draggable();
$("#carrello").droppable({
drop: function(event, ui) {
console.log("Dropped on " + $(this).attr("id"));
$(this)
.find("p")
.html("Dropped.");
}
});
$("#carrello2").droppable({
tolerance: "touch",
drop: function(event, ui) {
console.log("Dropped on " + $(this).attr("id"));
$(this)
.find("p")
.html("Dropped.");
$("#carrello").droppable("option", "accept", "*");
},
over: function(event, ui) {
$("#carrello").droppable("option", "accept", ".snowflake");
}
});
});
When the Draggable is Over the 2nd droppable, we adjust the accept option to something that is not the draggable element. This way when drop happens, it is not interested in it. Once the dropped is performed, we can switch it back to accept all items.
You can also disable the dropables, yet this causes additional Styles to be applied. Changing the accept does not.
I am trying to combine select2(4.0.2) and mCustomScrollbar(3.1.13) libraries to have custom dropdown list with custom scrollbar.
Here is the code sample .
$(document).on("select2:open", "select", function() {
$('.select2-results').mCustomScrollbar({
mouseWheel: true,
advanced: {
updateOnContentResize: true
}
});
});
The main issue is mousewheel scrolling. It works only if you hold the cursor over the scrollbar itself.
mousewheel.js(3.1.3) included, but it seems not working properly. There is no event firing while scrolling over the dropdown list body.
Any ideas, how to fix it? Thanks in advance.
I had the same problem. I have fix it by this way:
$(".select2").on('select2:open', function (evt) {
$('.select2-results').mCustomScrollbar({
scrollButtons: {
enable: true
},
theme: "my-theme",
mouseWheel: true
});
$('#mCSB_1_scrollbar_vertical').css("pointer-events", "auto");
$('#mCSB_1_scrollbar_vertical').on("mousedown", function () { //cross-domain iframe mousewheel hack
$(this).css("pointer-events", "none");
})
})
and plus css
.select2-results .mCSB_scrollTools .mCSB_dragger{
margin-left: 96% !important;
width: 5px!important;
}
.select2-results #mCSB_1_scrollbar_vertical{
width: 100%!important;
}
.select2-results .mCSB_scrollTools .mCSB_draggerRail{
margin-left: 96%!important;
}
The other answer that was given is a bit of a hack, so I went a bit further into this and found out that select2 actually binds the mousewheel event to the result list and therefore the mousewheel event is fired on the ul element inside the .select2-results.
To fix it simply unbind the mousewheel on the ul element first:
$(".select2").on('select2:open', function (evt) {
// Unbind mousewheel event from select2 result lists
$(".select2-results ul.select2-results__options").unbind("mousewheel");
$('.select2-results').mCustomScrollbar();
});
I have a table and need to drag/drop cells containing data into blank cells. I'm able to drag and drop fine, but once a cell is dragged away, I need its "old" position to now become a droppable cell. Since the cell is dragged, I need something else to reference. I ended up wrapping each of the td elements in a div element, but all references return "undefined" on the inner cellDiv id (or return the outer tableDiv id). On the fiddle, I notice that the blue background is not appearing so I don't think the 'cellDiv' is doing much.
Next I am going to try swapping the td and cellDiv elements, but I decided to post the question first, as I've searched everywhere and cannot seem to find this specific problem addressed. Thanks for your help.
here is the problem in a jsfiddle: http://jsfiddle.net/tgsz34hx/3/
And the code:
<div id='tableDiv'>
<table>
<tr id='row1'>
<div class='cellDiv' id='r1c1'>
<td class='drop' id='col1'>Drop Here</td></div>
<div class='cellDiv' id='r1c2'>
<td class='nodrop' id='col2'>Drag Me</td></div>
</tr>
</table>
</div>
$(document).ready(function () {
var fromDiv;
$('.nodrop').draggable({
cursor: "move",
appendTo: "body",
revert: "invalid",
start: function (event, ui) {
var thisDiv = $(this).attr('id');
fromDiv = $(this).closest('.cellDiv').attr('id');
alert("thisDiv=" + thisDiv + ", fromDiv=" + fromDiv);
}
});
$('.drop').droppable({
accept: ".nodrop",
tolerance: "pointer",
snap: ".drop",
drop: function (event, ui) {
var parenttd = $(ui.draggable).closest('td').attr('id');
var parentdiv = $(ui.draggable).closest('.cellDiv').attr('id');
// alert("parenttd=" + parenttd + ", parentdiv=" + parentdiv);
$(this).removeClass('drop');
$(this).addClass('nodrop');
$(this).droppable('option', 'disabled', true);
}
});
});
#tableDiv {
background-color: grey;
}
#tableDiv td {
background-color: red;
}
#tableDiv div {
background-color: blue;
}
I'm using Crossrider, I want to add a draggable div to the page's DOM.
The following code works well on Chrome and Firefox, and the dragstop handler function is fired for both Chrome and Firefox without any problems.
But for IE, the div is draggable once ! i.e. Once the div is dropped, it cannot be dragged again, and more strange is that the dragstop event handler is not fired at all in IE !?
How to fix this in IE !?
Here is the code:
extension.js file
appAPI.ready(function(jQuery) {
appAPI.resources.jQueryUI('1.10.1');
appAPI.resources.includeCSS('styles.css');
var $div = jQuery('<div class="square" ></div>').appendTo('body');
$div.draggable( {containment: "window", scroll: false} );
$div.bind('dragstop', function() {
console.log("drag stopped ...");
});
});
styles.css file
.square {
display:block;
z-index: 1000001;
background-color: #000000;
height: 100px;
width: 100px;
top: 0px;
left: 0px;
position: fixed;
}
Kindly note, that I tried the code without crossrider and I run it on IE, it works well. You can try it by using this link: http://jsfiddle.net/GHaMV/
I ran into the same problem using Crossrider and managed to fix the issue by declaring a handler function that returns the draggable element, so your code should look as follows:
$div.draggable({
containment: window,
helper: function() {
return $div;
}
});
Hope it helps...
There is no dragstop event, just the stop hook (see the docs):
Use it like this:
$div.draggable({
containment: "window",
scroll: false,
stop: function() {
console.log("drag stopped ...");
}
});
I use jquery-ui-auto-complete-with-multi-values. My textbox is downstream of page, But autocomplete-menu is opened above the page. I cant understand this bug. I used example that is on jquery site. Its is same examle.
I add jquery and css at the page.What could be the problem?
UPDATE
Script
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function () {
var availableTags;
$.ajax({
url: '#Url.Action("GetTags", "Question")',
type: 'GET',
cache: false,
beforeSend: function () {
// Show your spinner
},
complete: function () {
// Hide your spinner
},
success: function (result) {
availableTags = result;
}
});
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
</script>
Controller
[HttpGet]
public JsonResult GetTags()
{
var data = entity.Tags.Select(x => new { label = x.TagName, value = x.TagName });
return Json(data, JsonRequestBehavior.AllowGet);
}
Razor
<div class="demo">
<div class="ui-widget">
#Html.TextBoxFor(x => x.Title, new { #class = "my_text_box", id = "tags" })
</div>
</div>
<!-- End demo -->
<div class="demo-description">
<p>
Usage: Enter at least two characters to get bird name suggestions. Select a value
to continue adding more names.
</p>
<p>
This is an example showing how to use the source-option along with some events to
enable autocompleting multiple values into a single field.
</p>
</div>
Css
.ui-autocomplete {
position: absolute;
cursor: default;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
Thanks.
I found the problem. Its about CurCss in jquery-ui version that I have. In older version of jquery-ui has not this method. I got script refrence from google-apis. Problem is fixed now.
Thanks.