I have two divs, one Draggable and one Sortable.
I'd like to keep the values in the sortable unique: I don't want any item that is already in the draggable to be able to be dropped again in the sortable.
I tried to use cancel() but it doesn't seem to be working.
http://jsfiddle.net/6DSaV/2/ shows that I can't even get cancel to do anything.
if you change the tag in the sortable div for a DIV and not a P. The event cancel() works.
<div id='sortable'>
<div>Drag stuff here.</div>
</div>
<div id='draggable'>
<div data-id='1'>One</div>
<div data-id='2'>Two</div>
</div>
Related
I have something like this:
$('#mover' ).draggable({});
$('div').droppable({
drop: function(event, ui) {
console.log(event.target.id)
}
then
<div id="container">
<div id="target_1"></div>
<div id="target_2"></div>
<div id="target_3"></div>
</div>
When I drop mover on a div "container" is returned. how do I return instead the lowest child that the item was dropped on?
I know the solution to the actual problem: I was trying to drop an element on same div that it came from.
<div class="sortable-sections">
<fieldset class="section draggable" id="flSectionType">
<div class="btn-drag section-handle hidden-view">
</div>
<div class="section-header">
<span class="section-label">Job Requirements</span> <a class="section-info" href="#more-info"
title="Minimum Education, Minimum Work Experience, Required Licenses/Certifications, Required Skills, Knowledge, and Abilities needed to perform the job.">
?</a>
</div>
<div class="sortable-items">
</div>
<a class="section-add-item hidden-view" id="addJR" href="#add-item" data-item='{"id":"addJR","template":"requirement","item_type":"Job Requirement"}'>
Add a new Job Requirement</a>
</fieldset>
<fieldset class="section draggable">
</fieldset>
<fieldset class="section draggable">
</fieldset>
<div>
The above code will generate a list of sections which can be dragged with in the sortable-sectons.
I am using the following script to remove sections manually and adding it back to sortable-sections, but it is not registering the jquery events.
var $section = $('.sortable-sections').find($('#flSectionType');
$('.sortable-sections').find($('#flSectionType').remove();
......
.......
$('.sortable-sections').append($section.val());
After appending the section, the event which are registered for the section-add-item css classes are not triggering.
Note:
instead of "on" used the "live" method. but it is not holding all attributes.
Edit:
Event code:
$('.section-add-item').on('click', function (e) {
that.addSection(this);
e.preventDefault();
});
instead of drag and drop, manually i am ordering the section on initial load.
.section-add-item must already exist when adding the event and the usage of on is wrong
$('body').on('click', '.section-add-item', function (e) {
});
instead of the body you can add another parent of .section-add-item that already exists before .section-add-item is created.
I have a view with a bunch of elements in it.One of them (a div) is shown depending of a value that changes inside a select_tag (also within the same page).
I'm getting the selected ID from the select_tag element
$('#some_id').on('change',function(){
//$(this).val()
})
but then just don't know how to fetch the object and check for one of its properties and that way know if I should show the div or not?.
I thought of sending that id to the server...do whatever I need over there and then come back to the view and try something like this
<% if some_condition %>
<div>
...
</div>
<% end %>
This (of course) might not be the way.I'd be glad to understand how this happens
You way of doing it after getting some data from the server onChange of the select would work. You might also consider this approach.
But if you could pre-populate the divs and add a class or some other attribute it with which you could relate to the chosen option in the select field, then you can prevent the server call entirely.
<div class="opt1Val selectOptsDiv"> </div>
<div class="opt2Val selectOptsDiv"> </div>
<div class="opt3Val selectOptsDiv"> </div>
hide all these divs initially with css display: none;.
$('#some_id').on('change',function(){
var selectedOptionVal = $(this).find("option:selected).val();
$("." + selectedOptionVal).show();
})
But I guess you would be able to do this if the showing and hiding of the div's depend only on the selected option value and do not have to go through some other processing at the server end.
I'm activating bootstrap.js tabs by specifying data-toggle="tab" in my navbar:
<li>Look Inside</li>
Then, returning the content of those tabs with:
<div class="tab-content">
<div class="tab-pane active" id="tab1">Content
</div>
</div>
I'm wondering how I can possibly return the same content to two separate places on the page, each in seperate div's. As of now, I add:
... for a second time after the first div had been closed (I have to close it because I have a horizontal navbar in between the top content and the bottom content) and it doesn't return content.
Is there any way I can call "tab-content" something else and still have it maintain twitter bootstrap functionality.
TY
Two ways to do this. One is pure CSS, taking advantage of the fact that the bootstrap dropdown will open any menu. For instance:
myvew.html.haml
%ul.nav.nav-pills
%li.dropdown
%a.dropdown-toggle{"data-toggle" => "dropdown"}
Foo
%b.caret
%ul.dropdown-menu{style: "position: relative; top: -10px;"}
%li Bar1
%ul.dropdown-menu
%li Bar2
What this will do is that when the "Foo" link is clicked, both "Bar1" and "Bar2" are shown.
However, I tend to prefer this approach: register an event listener onto the "Foo" link, and then the event listener toggles .show() or .hide() for the target divs.
$(document).ready(function() {
$('#myclickdiv').click(function() {
$('.mydivs').collapse("show");
});
});
I have a rails project where the the view displays a list of items. I use acts_as_list to make the list DnD orderable and in_place_editing on each item to, well, edit it.
My problem is that when I DnD the items around, the item I drag automagically becomes editable when I drop it. Any tips on how I can avoid that behavior.
Ideally, I'd like to make it editable by clicking a small icon next to the item, but I don't know how to make that work with this plugin.
Thanks in advance.
This happens because the element you are dragging has a listener on mouseup that begins the edit. You can specify an :external_control in the options hash if you want a different element to trigger the edit.
<div id="<%= dom_id(#obj) -%>">
<span><%= #obj.to_s -%></span>
<img id="<%= dom_id(#obj, :edit) -%>" src="edit_handle.png"/>
</div>
<%= in_place_editor(dom_id(#obj), :external_control => dom_id(#obj, :edit)) %>
<%= draggable_element(dom_id(#obj)) %>