w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
Calling jQuery draggable destroy when closing marionette view
the onClose method get fired after the Close method of the view. the close method of the view does the following per the documentation. https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.view.md#view-close unbind all listenTo events unbind all custom view events unbind all DOM events remove this.el from the DOM call an onBeforeClose event on the view, if one is provided call an onClose event on the view, if one is provided so if the clean up that this method does is not enough for your scenario and you still need to call destroy, try doing it in the onBeforeClose method, this will me called before the close method.

Categories : Jquery

jquery draggable & droppable get source container (that draggable came from)
You can use a variable which you set in the start event of the draggable and get that info in the stop event of the droppable. $(function () { var sourceElement; $("#Table1 tr:not(.disabled), #Table2 tr:not(.disabled), #Table3 tr:not(.disabled)").draggable({ helper: 'clone', revert: 'invalid', start: function (event, ui) { $(this).css('opacity', '.5'); //NEW sourceElement = $(this).closest('table').attr('id'); }, stop: function (event, ui) { $(this).css('opacity', '1'); } }); $("#Table1, #Table2, #Table3").droppable({ drop: function (event, ui) { $(ui.draggable).appendTo(this); //alert sourceElement alert($(ui.draggable).text() +

Categories : Jquery

Make jQuery UI draggable element only draggable in down direction
$('#repel').mousemove(function () { var z = $(window).scrollTop(); var o = $('#repel').offset().top; var h = $('#repel').height(); $("#containment-wrapper").css({ top: o + h -2000 }); if (z < 10) { $("#containment-wrapper").css({ top: -850 }); } else { $("#containment-wrapper").css({ top: o + h -2000 }); } });

Categories : Javascript

JQuery Draggable: How do I make a draggable element snap to the inner-top of a div?
i'm not sure but it seems like jQueryUI doesn't support something like that. You could use this workaround to get the behaviour you need. Simply put another div in your div which is used for the snap. <div class='row'> <div class='innerHack'></div> </div> Here's a Fiddle

Categories : Jquery

Jquery draggable element when cloned not draggable
call draggable() again for the cloned element after it is appended to the DOM function seCopyBox(x) { z = $('.seBox').eq(x).clone(); z.insertAfter($('.seBox').eq(x)).draggable(); } and i would go with clean jquery click function rather that inline javascript.. $(document).on('click','.seBox p',function(){ var x=$(this).closest('.seBox').index(); var z = $('.seBox').eq(x).clone(); z.insertAfter($('.seBox').eq(x)).draggable(); } remove the inline javascript and the seCopyBox function...

Categories : Jquery

jQuery UI - Revert a jQuery draggable object back to its original?
You need to enable droppable on the objects you intend to drag and use revert there. Like this: $(".draggable2").droppable({ greedy: true, tolerance: 'touch', drop: function (event, ui) { ui.draggable.draggable('option', 'revert', true); } }); See this fiddle for a demo Also see this SO question

Categories : Jquery

Rails Destroy Dependency not calling destroy function?
I would suggest moving the custom Feed-deletion code into your Post model like do: class Post before_destroy :cleanup def cleanup # Delete Feed on the creation of the post if Feed.exists?(:content1 => 'newpost', :content2 => id) @feeds = Feed.where(:content1 => 'newpost', :content2 => id) @feeds.each do |feed| feed.destroy end end end end Now, if @feeds is empty, then it's probably a problem with the exists? function. But moving this code to this callback function will ensure that anytime a Post is deleted, the associated feeds get deleted. In your controller, just call @post.destroy as normal, and the rest will take care of itself.

Categories : Ruby On Rails

jQuery draggable div
http://jqueryui.com/draggable/#snap-to Snap the draggable to the inner or outer boundaries of a DOM element. Use the snap, snapMode (inner, outer, both), and snapTolerance (distance in pixels the draggable must be from the element when snapping is invoked) options.

Categories : Jquery

How does one set a div to be draggable with jQuery?
Assuming you declared library jquery.ui.js for draggable method, and assuming you do append a or a for loop each, the counter may be the variable i, simplifying the attributes you add to your order would be something like. for (var i = 0; i < jsonResult.data.length; i++) { $('#portfolio').prepend("<div id='equity'"+i+" class='portfolioEquity'><h5>"+jsonResult.Data.Symbol+"</h5></div>"); $('#'+i).draggable(); };

Categories : Javascript

using jquery to "destroy" a function
jQuery does not have a kill method. You might be able to replace the zoom method with a function that does nothing, i.e.: $(".zoom").zoom = function () { return; }; Although doing that would be destructive.

Categories : Jquery

create draggable div on click make the parrent draggable not the new div
You are applying the .draggable() at the wrong element. The .append() method returns the container element, not what you added. This should work: $('<div class="boxArt red" row="2" col="4" id="dragme3">DRAG ME3</div>').draggable().appendTo('#dropbtn');

Categories : Javascript

Saving jQuery UI draggable value?
I dont know what need_id is but it is probably something that you can get from a data attribute. The code below will send the new position of your element every time you stop dragging the element: $( ".ELEMENT" ).draggable({ containment: '#_moon_static_bg_status', stop: function(event, ui) { $.ajax({ type: "POST", url: "your_php_script.php", data: { x: ui.position.left, y: ui.position:top, need_id: need} }).done(function( msg ) { alert( "Data Saved: " + msg ); }); } });

Categories : PHP

jQuery draggable and droppable
Use the accept property. $( "#snap-one" ).droppable({ accept: "#draggable", drop: function( event, ui ) { var top = $('#draggable').css('top') ,left = $('#draggable').css('left'); if (top === '-107px'){ if(left === '0px'){ $(ui.draggable).draggable('disable'); if ($('#draggable').hasClass('ui-draggable-disabled')){ alert('hello'); } } } } }); Heres your altered fiddle.

Categories : Javascript

Jquery Draggable Placeholder
Try the blow code, $( "#container_drag" ).draggable({ drag: function() { $('#container_drop').addClass('highlight_container'); }, stop: function() { $('#container_drop').removeClass('highlight_container'); } }); Where, container_drag - your draggable container and container_drop - where the items going to be dropped. And in Css, .highlight_container{border:...,background:...}

Categories : Jquery

Jquery draggable sortable
Put the connectToSortable in your draggable function. jQuery Part: $("#container").sortable({ receive: function(event,ui){ ui.item.remove(); } }); $("#element-container").draggable({ connectToSortable: "#container", helper: "clone", revert: "invalid" }); HTML Part: //First <div id="container"></div> //Second <div id="element-container"></div>

Categories : Jquery

jQuery + PHP - Croopzoom - IE not draggable
I have given soución in a programming forum I added this CSS to the element of "drang and dro". You must have "background" because otherwise, Internet Explorer does not launch events for that object (this is my logic, what I understand). This is the CSS applied in order to "drag and drop": #crop_container_selector{ background:url(about:blank) } Regards

Categories : Misc

Rotating a .draggable() div - JQuery
Hope this helps jQuery.fn.rotate = function(degrees) { $(this).css({ transform : 'rotate('+ degrees +'deg)' }); }; var rotation = 0; $('.customize-Container').on('click', '#draggable', function() { rotation += 5; $(this).rotate(rotation); });

Categories : Javascript

JQuery draggable droppable
Another thing, the proxy: 'clone' doesn't work. it should be helper:"clone" docs revert: true From jQuery doc: Boolean: If set to true the element will always revert. So you want: revert:"invalid" Here is a simple example : http://jsfiddle.net/Rusln/8BY5e/

Categories : Jquery

Knockoutjs and Jquery draggable div
Try to read next article - Revisiting Dragging, Dropping, and Sorting observableArrays It contains detailed explanation and number of samples.

Categories : Javascript

JQuery UI draggable within a triangle
One of my friends came up with a really simple and nice solution: see it $( "#circle" ).draggable({ drag: function(e, ui) { var width = $('#triangle').width(); var height = $('#triangle').height(); var x = ui.position.left + $(this).width() / 2; var y = ui.position.top + $(this).height() / 2; var difference = Math.abs( x - width / 2 ); var min_y = height * ( difference / (width / 2) ); if ( y < min_y ) y = min_y; if ( x < 0 ) x = 0; if ( y < 0 ) y = 0; if ( x > width ) x = width; if ( y > height ) y = height; ui.position.top = y - $(this).height() / 2; ui.position.left = x - $(this).width() / 2; } });

Categories : Jquery

jQuery UI Slider Draggable
If i understand you correct, what you try to accomplish in the first place is a two-way communication between the slider and the select element? A possible solution using widget factory to extend the slider and turn the handle into a draggable: fiddle $.widget("ui.dragSlider", $.ui.slider, { _create: function () { this._super('_create'); var drWidth = this.element.context.clientWidth; var drMax = this.options.max - this.options.min; var drStep = drWidth / drMax; var perc = drStep / drWidth; // turn handle into draggable widget this._handleDraggable(this.handle, drWidth, drMax); // add a basic ruler to the slider this._addVisuals(drMax, drStep); }, // setup handle as a draggable object // wire up dra

Categories : Jquery

jQuery .draggable without clicking
EDIT Looks better without jQuery UI at least works in Chrome. LIVE DEMO $(function(){ var $par = $('.magic_movable'), $bg = $('.magic_background'), parW = $par.outerWidth(), parH = $par.outerHeight(), bgW = $bg.width()/2, bgH = $bg.height()/2, X, Y, posX, posY; var drag = 0; // flag $par.on('mousemove', function( e ){ X = e.clientX - $(this).offset().left; // get mouse X position inside parent Y = e.clientY - $(this).offset().top; // get mouse Y position inside parent posX = Math.min( Math.max(0, X-bgW), parW-(bgW*2) ); // containment X posY = Math.min( Math.max(0, Y-bgH), parH-(bgH*2) ); // containment Y if(drag){ $bg.css({left:posX, top:posY}); // move element only if flag is true (1) } }).on('mouseleave',

Categories : Jquery

jQuery textarea draggable
Have you tried : <div class="item-txt txt-static" id="1" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;"> <textarea class="drag-item" disabled style="width:98px; height:48px;">Some text</textarea> </div> The text area was not draggable since you have given draggable property to the div only.

Categories : Javascript

jQuery's draggable function
For one thing, you're applying $.draggable() twice, you don't need to do it again in your $(a).click(). Also it's not a good idea to do this with absolutely-positioned elements, see if you can put your <div>'s in a container that is absolutely positioned and keep the ones inside relative.

Categories : Jquery

jQuery UI draggable revert
if you add tolerance: 'touch' to the droppable it works. Which points to it being more of a css issue than one with the script. Updated JS BIN

Categories : Jquery

Draggable div clone using jquery ui
The helper: 'clone' option for a draggable only creates a clone of the div while dragging. Try appending a clone during the drop event of the droppable widget. (Note: I also removed the revert option from the draggable as it's not needed) google.maps.event.addListener(map, 'tilesloaded', function(evt) { $(function() { $( ".draggable" ).resizable(); $( ".draggable" ).draggable({ helper: 'clone', snap: "#drop_here td", opacity: 0.7}); $( "#drop_here td" ).droppable({ accept: '.draggable', drop: function( event, ui ) { $(this).append($(ui.draggable).clone()); } }); }); });

Categories : Jquery

Issues with jQuery UI resizable and draggable
Absolute positioning does not affect the div from being either resizable OR draggable. This seems to work just fine: HTML <div id="dragResize"></div> JQuery $("#dragResize").draggable().resizable(); JSFiddle I believe that your problem is somewhere else in your code.

Categories : Jquery

Jquery UI draggable and droppable - scopes
See this FIDDLE Basically, you can only have one scope easily. However, the drop method of droppable allows you access to the element being dragged by passing in 2 properties, event and ui. so if you only use one drop function and change it to : $('ol li').droppable({drop: function(event, ui){ alert($(ui.draggable).prop('id'));}}) you can see whichever draggable is dropped has its id alerted. You can pretty much then do whatever you need to do by putting data-props or whatever on each draggable element and accessing them with: $(ui.draggable)._jquery-method_();

Categories : Jquery

Restricting the draggable area in jQuery UI
You can do this by wrapping the image in a container div that's twice as large as the image, minus the widnow div size, and offset by the size of the range div. That and the containment option and you should be all set. jsFiddle example HTML <div id="range"> <div id="container"> <img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg" id="map" /> </div> </div> JS jQuery("#map").draggable({ containment: $('#container') }); CSS #range { width:400px; height:400px; overflow:hidden; border:1px solid black; position:relative; } #container { position:absolute; top:-800px; left:-1520px; width: 3440px; height: 2000px; } #map { width: 1920px; height: 1200px; top:800px; left

Categories : Jquery

jQuery UI draggable/droppable not working
I notice the website you are referencing they use an older version of JQuery 1.5.0. When I changed the JQuery file version to 1.10.3 the demo page I was testing stopped working (which was modeled off of this demo here) so my suggestion would be to test with the 1.5.0 version JQuery. If that doesnt work I would try testing your code on platform that is outside of WordPress. Depending on what plugins you are using there could be conflicting code.

Categories : Javascript

jQuery UI Draggable Position not refreshing?
You could use an helper : http://jsfiddle.net/tB4L3/4/ $(".draggable").draggable({ revert: "invalid", cursor: "move", opacity: 0.7, helper: function () { return $(this).clone().appendTo('body'); }, start: function () { $(this).hide(); }, stop: function () { $(this).show(); } });

Categories : Jquery

jQuery draggable line up grid
The problem is that you are setting the grid to a size that is not a factor of the size of your items. Here is your fiddle, updated with the correct implementation. I have repeated the relevant code, below: jQuery $(".draggable").draggable({ grid:[20, 20] // 20 and 20 must be factors of the corresponding dimensions on your item }); CSS .draggable{ width:38px; /* Width and Height are both adjusted to account for the border */ height:38px; border: 1px solid black; } If you decide that you want to prevent the overlapping of grid items, you need only set the grid size to be the same as the size of the grid items, themselves. Here is your fiddle updated with both solutions, so so that you can compare them.

Categories : Javascript

jquery multiple draggable and sortable
Easy enough, there's an option in sortable that you can use: connectWith. It accepts a selector to connect other sortables: $(".container").sortable({ connectWith: '.container', revert: true }); JSFiddle Your next problem will probably be that every box should only accept one element. So you need to delete the other elements in the sortable dynamically on drop of an element, which is trickier than I thought.

Categories : Jquery

jQuery draggable weird behavior
Use the z-index property. Here is the code: $(document).ready(function() { $("#h, #e, #l, #l2, #o").draggable({ handle: "a", start: function(){ $('#name h1').css('z-index', 99); $(this).css('z-index', 999); } }); }); And here is the fiddle: http://jsfiddle.net/8Huu7/41/

Categories : Jquery

jQuery Draggable not behaving as expected
I fixed your issue. You were creating a div with the same id '6' each time you clicked on add div. $("#adddiv").click(function() { $('<div></div>').draggable().appendTo($('#set')); }); Fiddle : http://jsfiddle.net/vQ3Tg/1/

Categories : Javascript

handling jquery draggable with php loop
Use class instead of id. Because you can use only one id per element but class can be used for multiple elements. Try this: <?php //display boxes while ($list = $result->fetch_assoc()) { ?> <a href="<?php echo $list['url']; ?>"> <div class="box"><h2><?php echo $list['label']; ?></h2> </div> </a> <?php }; ?> <script> $(function() { $(".box").draggable(); }); </script>

Categories : Jquery

Jquery Draggable Element Intersect
you'll need to record where it came from on dragging start and then check for an overlay on dragging stop. check out this jsfiddle example in a nutshell, extend your draggable options array to include start, record the top/left position in a data object, then on stop, check other draggable items in the DOM and call a revert function if anything matches. ex: $( this ).draggable({ start: function() { var div = $(this); div.data('top', div.css('top')); div.data('left', div.css('left')); }, containment: 'parent', scrollSpeed: 1000, cursor: "crosshair", scroll:true, disabled: DragDropState, stop: function(event, ui) { var draggables = $('.ui-draggable'); var div = $(this); var goHome = function () { div.css('left', div.data('lef

Categories : Javascript

jQuery UI Draggable Dynamic Content
You only use val() for input elements otherwise you should use html() So you code should be: var name = $(this).find('td').first().html();

Categories : Jquery

jQuery Draggable div Position misplaced
I replaced axis: "y", containment: "#divAll" by containment:[ 9, 50, 9, 450 ] where containment:[ xLeft, yTop, xRight, yBottom ] This way, draggable will not go above 50px on top and under 50px on bottom. And while stay at 9px (this will do your vertical align) Fiddle :http://jsfiddle.net/uKqta/4/

Categories : Javascript

jquery ui resizable with draggable error
The problem is with your CSS and the float. I commented the float out and it works fine. .menu{ width: 200px; height: 700px; display: block; /*float: left;*/ background-color: gray;} You could also let the height "auto-set" itself if you want the float. Is there a reason for the height to be 700px? .menu{ width: 200px; /*height: 700px;*/ display: block; float: left; background-color: gray;} also get rid of: display: http://jsfiddle.net/alutz33/btrP3/ This link includes the new requests pertaining to the boarder problem: http://jsfiddle.net/alutz33/rz4qw/

Categories : Jquery



© Copyright 2017 w3hello.com Publishing Limited. All rights reserved.