I have a div in prototype and it is draggable I want to make its draggable property false. How can I do it? Thanks.
<div id="answer_0_3" class="dragndrop_0 foreign dropped_answer" >Notebook</div>
My draggables are as follows:
var draggables = [];
$$('.answer.dragndrop_0').each(function(answer) {
draggables.push( new Draggable( answer, {revert: 'failure', scroll: window} ) );
});
Prototype itself does not support Draggable, but it's often coupled with Scriptaculous.
If you refer to a Scriptaculous Draggable, then you need to call it's .destroy method:
// suppose you initialize your Draggable something like this:
var answer_0_3_draggable = new Draggable('anser_0_3', ...);
...
// later in your code
answer_0_3_draggable.destroy()
How do you initialize those Draggables anyway? Please show some more code thant your one-liner?
Related
Instead of using region.show(view), I would like to add multiple views to a region without destroying the view already present in the region. I have tried using preventDestroy: true, but it isnt working out. The region only shows the last "application".
var fetchingApplications = App.request('application:entities');
$.when(fetchingApplications).done(function(applications) {
console.log(applications);
applications.each(function(application) {
var applicationView = new List.Application({
model: application
});
App.layout.mainRegion.show(applicationView, { preventDestroy: true });
});
I know the example look weird, because I could merely use a CollectionView. However, using a CollectionView is not what I want to do.
I think it should works with dynamically add region and fadeIn. You could add class or inline style with 'display: none' so it will be initially not displayed and then in view put 'onShow : function(){ this.$el.fadeIn(); }'
In Fabric.js we have Object modified events like object:modified. Do we have similar event for the entire canvas.
Actually I am trying to implement undo and redo features. I am saving the canvas as JSON if something happens on it and loading it again for undo feature.
Do we have any better solution for this features in Fabric.js?
Don't forget to check for added/removed objects too. You could implement it like this:
var canvasModifiedCallback = function() {
console.log('canvas modified!');
};
canvas.on('object:added', canvasModifiedCallback);
canvas.on('object:removed', canvasModifiedCallback);
canvas.on('object:modified', canvasModifiedCallback);
This is better explained in this link. Use it this way:
canvas.on('object:moving', function(e) { // or 'object:added'
var activeObject = e.target;
console.log(activeObject.get('left'), activeObject.get('top'));
});
Currently I have a page which on load scatters draggable divs randomly over a page using math.random
Using media queries however the page uses packery to display the same images for browser widths under 769px in a grided fashion.
I had the idea that it could be interesting to create a 'sort/organize' button which would rearrange these divs using packery and remove the draggable class already applied, however i have no idea if this is possible or how to go about it. If there is any method of animating this process that would also be a bonus!
If anyone could at the very least point me in the right direction i would be extremely thankful!!
Hopefully this gives you a bit of a starting point.
I would read up on JQuery as it has some useful helpers for DOM manipulation.
I don't think this is the most efficient way to do it, and I think you will need to rethink your test harness for doing this in the future, but hopefully this gets you started.
Firstly I've added a button to trigger the sort
<div class="rotate" id="contact">Contact</div>
<div id="logo">Andrew Ireland</div>
<button id="sort">sort</button>
Then updated the script to override the css setting to switch between draggable view and item view.
// general wait for jquery syntax
$(function(){
// trigger the layour to sort get the packery container
var container = document.querySelector('#container.packery');
var pckry = new Packery( container );
//button function
$("#sort").click(function(){
//Hide all the dragged divs
//ui-helper-hidden is a jquery ui hider class
if($('.box').css('display') == 'block') {
$('.box').css({'display':'none'});
//Show all the item class's
$('.item').css({'display':'block'});
//show the container
$('#container').css({'display':'block'});
// trigger the layour to sort
pckry.layout();
} else {
//hide all the item class's
$('.item').css({'display':'none'});
//hide the container
$('#container').css({'display':'none'});
//show the draggable box's
$('.box').css({'display':'block'});
}
});
$( ".pstn" ).draggable({ scroll: false });
$(".pstn").each(function(i,el){
var tLeft = Math.floor(Math.random()*1000),
tTop = Math.floor(Math.random()*1000);
$(el).css({position:'absolute', left: tLeft, top: tTop});
});
});
As I said this is more to get started. The packery documentation details how to trigger its layout functions so another approach would be to only have the draggable elements, and put these inside a packery container. Then when you want to sort them you can just trigger that the packery.layout() function.
I hope this is helpful, I am only just getting started on stack overflow so any feedback would be appreciated.
If have a little game where images have to be dragged on the right hotspots of a larger image.
The little images are inside a containerView, the hotspots also are ContainerViews.
When i drop the images on a hotspot i use the following code in my drag-n-drop mixin to move the image in the dom:
Player.Droppable = Ember.Mixin.create({
drop: function(event) {
//get the view that was dragged
var viewId = event.originalEvent.dataTransfer.getData('Text');
var view = Ember.View.views[viewId];
//log the parent-view: App.AnswerListView
console.log(view.get('parentView').constructor);
//detach the view from the original containerView
var parentView = view.get('parentView');
parentView.removeObject(view);
//attach it to the hot-spot-containerview
this.addObject(view);
//logging this gives a different result: App.HotspotView
console.log(view.get('parentView').constructor);
event.preventDefault();
return false;
}
});
The view i'm dragging is an App.AnswerView. What i'm expecting from the docs is that the function parentViewDidChange on the AnswerView is triggered, but that doesn't happen:
App.AnswerView = Ember.View.extend(App.Draggable, {
templateName: "answer",
classNameBindings: [':answer', 'this.content.isSelected:selected'],
click: function(evt){
this.get('controller').send('answerClicked', this.content);
},
parentViewDidChange: function(){
this.get('controller').send('answerMoved', this.content);
},
});
The docs say: Called when the parentView property has changed. In my case, it is changed. Is this a bug, or am I missing something here?
TIA
This issue was a bug and got resolved in the 1.0.0 final
https://github.com/emberjs/ember.js/issues/2423
pushObject and removeObject are methods, inherited from the Ember.MutableArray Mixin, that the Ember.ContainerView extends. If you look at Ember's source code for ContainerView (https://github.com/emberjs/ember.js/blob/v1.0.0-rc.2/packages/ember-views/lib/views/container_view.js#L15), you will see that ContainerView does not override those methods, thus they only manipulate its childViews array, not the view's parent view.
You should find methods that manipulate the '_parentView' property here instead: (https://github.com/emberjs/ember.js/blob/v1.0.0-rc.2/packages/ember-views/lib/views/view.js#L2018) - in the Ember.View's implementation.
So in short, use:
removeChild instead of removeObject, to delete a child view from your ContainerView
createChildView + pushObject instead of 'addObject', if you want to add a new child view to a ContainerView.
Example Code:
Player.Droppable = Ember.Mixin.create({
drop: function(event) {
//get the view that was dragged
var viewId = event.originalEvent.dataTransfer.getData('Text');
var view = Ember.View.views[viewId];
//log the parent-view: App.AnswerListView
console.log(view.get('parentView').constructor);
//detach the view from the original containerView
var parentView = view.get('parentView');
parentView.removeChild(view);
//attach it to the hot-spot-containerview
this.createChildView(view);
this.pushObject(view);
//logging this gives a different result: App.HotspotView
console.log(view.get('parentView').constructor);
event.preventDefault();
return false;
}
});
I'd like to write a plugin that can be used in the following manner:
var img = $('#someImage').Image();
or perhaps:
var img = $.Image({id: 'someImage', src: '/...'});
and then be able to do image-related functions:
img.highlight();
img.showAlter();
et cetera. However, I don't want to do:
$.fn.highlight = function() {}
since that would apply to all jQuery objects and i want my method to apply only to those objects I've called .Image() on.
is what I'm asking for possible? how?
You'd need to place your Image function on the prototype (fn), but then have the Image plugin assign the highlight and showAfter functions to that specific jQuery object on which .Image() is called.
(function( $ ) {
$.fn.Image = function( props ) {
this.highlight = function(){
this.each(function() {
$(this).css('border', "5px dashed yellow");
});
};
this.showAfter = function(){};
return this;
};
})( jQuery );
var img = $('img').Image();
img.highlight();
EDIT:
To clarify, this in the Image function is a reference to the jQuery object against which Image() was invoked.
this does not reference the Image function in any way.
Example: http://jsfiddle.net/saYLm/
$.fn.image.highlight = function() {}
assuming you have written a plugin named image this would prototype the highlight function to that object