w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML Categories
canvas drag and drop with multiple items
Here’s how to drag/drop with multiple items You have your squares defined in objects: var items=[] items.push({x:0,y:10,width:50,height:50,color:"red",isDragging:false}); items.push({x:70,y:10,width:50,height:50,color:"green",isDragging:false}); items.push({x:140,y:10,width:50,height:50,color:"blue",isDragging:false}); So you can hit test like this to detect which item(s) will be dragged: function setDragging(x,y){ for(var i=0;i<items.length;i++){ var item=items[i]; // if x/y hit this item, set it’s isDragging flag if(x>=item.x && x<=item.x+item.width && y>=item.y && y<=item.y+item.height){ item.isDragging=true; } } } Your mousemove handler calculates the distance of the drag. dra

Categories : Javascript

JQuery drag drop items and get its value to use it for search
You're calling contents = $(this).title(); jQuery has no .title() method - try using .attr('title'); instead

Categories : Jquery

Rearrange items of DataView with Drag and Drop
This reminds me a bad experience I had with drag drop in ExtJS 4. Anyway, you may try this plugin. Otherwise, here is something I have tried (scroll is not handled yet) (jsFiddle) : new Ext.view.DragZone({ view: view, ddGroup: 'test', dragText: 'test' }); new Ext.view.DropZone({ view: view, ddGroup: 'test', handleNodeDrop : function(data, record, position) { var view = this.view, store = view.getStore(), index, records, i, len; if (data.copy) { records = data.records; data.records = []; for (i = 0, len = records.length; i < len; i++) { data.records.push(records[i].copy(records[i].getId())); } } else { data.view.store.remove(data.records, d

Categories : Javascript

How to implement expandablelistview with Drag and Drop List Items in android
The basic idea behind drag and drop can be divided into two sections, like updating the UI and updating the data. Updating UI starts with hiding the selected item and show a detached row with the same value as the hidden item, this will show that the selected item is ready to drag, now move the detached row over the list view based on the touchmove event, when the user takes the hand ie the touchup event or any other event that happens while dragging, get the current row at which user touched last , remove the detached row and do the data updation and invalidate the expandable listview, this will redraw the list based on the new set of data and the user will get a feeling that the item is dragged and dropped in the list. I have done something similar, see this

Categories : Android

Drag and Drop Items in desired position Listview WinRT
This should help: XAML ListView and GridView reorder and drag and drop sample (Windows 8.1) http://code.msdn.microsoft.com/windowsapps/XAML-ListView-and-GridView-6bd77f71

Categories : Xaml

Drag and Drop Windows Form
I think, beside the drag and drop operation, you need to track your mouse move(or mouse enter) too, for getting the index of one element, drag'n'drop itself would not help(it get's the very first point), just track and identify the target by mouse move. or simply, add mouse enter event for the object(controls) you want targeted by the drop, choose the target position via mouse enter, and complete the oration via drop, and it's better to remove mouse enter event when the drop operation completed, and add it by drop enter again. hope I got your question true

Categories : C#

How to drag and drop form element contents
You need to use helper method of jquery draggable. In that helper method get the dragable control .. From that controll get the value of the control and set it as hellper value. on dropping get that value from like it was available in like ui.helper $(dragableSelector).draggable({ scroll: false, appendTo: "body", cursor: "move", cursorAt: { top: 5, left: -20 }, helper: function (event) { //your intput conrol var ctrl = $(this); //get value from control var val = ctrl.attr('val'); //wrap it in div soo you can see on dragging. var div = $("<div style='z-index:9999;position:absolute;overflow:auto;' >"+val+ "</div>"); and in you droping section you need to do some thing like this. $(dropableElementS

Categories : Jquery

How to Create simple drag and Drop in angularjs
I just posted this to my brand spanking new blog: http://jasonturim.wordpress.com/2013/09/01/angularjs-drag-and-drop/ Code here: https://github.com/logicbomb/lvlDragDrop Demo here: http://logicbomb.github.io/ng-directives/drag-drop.html Here are the directives these rely on a UUID service which I've included below: var module = angular.module("lvl.directives.dragdrop", ['lvl.services']); module.directive('lvlDraggable', ['$rootScope', 'uuid', function($rootScope, uuid) { return { restrict: 'A', link: function(scope, el, attrs, controller) { console.log("linking draggable element"); angular.element(el).attr("draggable", "true"); var id = attrs.id; if (!attrs.id) { id =

Categories : Javascript

create a shape in d3.js by drag and drop of a DOM element
I have just checked your own code and it works well. The circle is displayed when I drop the bar into the container. Please see the demo: http://jsfiddle.net/af7zk/ var treeCreator = function(){}; ...

Categories : Javascript

Create EditText by drag drop Android issue
Instead of moving the EditText, you should make a copy of it in the view. For example, you should do the following: String editTextString = editText.getText().toString(); EditText newEditText = new EditText(MainActivity.this); newEditText.setText(editTextString); So, you need to copy the text from the EditText and create a new EditText which you will add to the container. Make sure that you don't make the view invisible when you call v.startDrag(data, shadowBuilder, v, 0);

Categories : Android

Create Nested Drag and Drop divs with jquery-ui
It doesn't work because on document ready, $('.dest .parent') and $('.dest .parent .child1') don't match anything, so droppables are not initialized for those selectors. You have to initialize droppable when parent is dropped on .dest (and bind droppable only on the created .parent element) $('.dest').droppable({ accept: '.parent', drop: function (event, ui) { $newElt = $('<div class="parent box"></div>'); $newElt.appendTo(this); $newElt.droppable({...}); } }); I edited your fiddle: You can see the full demo here EDIT: If you want to check if only one .child2 exists when dropping on .child1, you can put your .append() inside an if/else structure, and use the .find() function, combined to length (which retrieve the number of element

Categories : Jquery

drag drop clone help needed for web form builder with postback
I was searching for the same thing and I came across this example: http://www.anupshinde.com/form-builder-part-2 It is a simple example that should get you started with it. Also follow the documentation for draggable - droppable on JqueryUI website.

Categories : Jquery

VS 2012 crash when I drag & drop classes form my solution to modeling project
This is a known issue in VS 2012. According to Microsoft, it will be fixed in the next release of visual studio. So, for VS 2012, there is no solution yet!

Categories : Visual Studio 2012

Drag and drop with jquery, button drag and div drop
I think, I have found the solution myself by playing with the above code. I was doing wrong with the button, because button has already clicked event mapped that is why when I was trying to drag the button it was not working with drag event. I just tried adding div element, which shows like button (styled with css) and it worked like the way I wanted. Only thing I needed to change is in html code: <ul id="left-pane"> <li><div align="center" style="width:100px;border:3px solid #ddd; padding:5px;cursor:move;background:#eee;">Drag Me</div> </ul> <ul id="right-pane"> </ul> Here is the final solution I was looking: http://jsfiddle.net/Y7RmR/77/

Categories : Jquery

Porting WinForms drag and drop to WPF drag and drop
Am I using the correct events?: I think you are using the correct events, but I think you have several problems in your code. I assume you have set the DataContext of your treeview to the real items and you use binding. How do I access the DataObject in textbox_Drop ? --> For getting the DataObject you have to get the real item by recursion (other solutions possible) DependencyObject k = VisualTreeHelper.HitTest(tv_treeView, DagEventArgs.GetPosition(lv_treeView)).VisualHit; while (k != null) { if (k is TreeViewItem) { TreeViewItem treeNode = k as TreeViewItem; // Check if the context is your desired type if (treeNode.DataContext is YourType) { // save the item targetTreeViewItem = treeN

Categories : C#

C# drag n drop, start drag operation in mouse_down ? conflicts with click
there is more then one way to do that. I strongly suggest you try some of them until you decide what's best for you. for example, you can use the mouse_down event to start the drag and drop by using a timer. if the user is clicking the mouse more then 0.5 seconds, u start the drag. the mouse_up event kill the drag/dropping. another way is making the drag and drop only with some key pressed while clicking the mouse.

Categories : C#

GWTQuery Drag Drop - Drag between nodes in cell tree
I think I have found a solution although it may not be the best, but it is working for me at the moment. In the setOnDrag method, I determine where the item is being dragged at which point I can either add a line before or after the element, or put some css on the element to denote that I am dropping the dragged item on top. I create a GQuery place holder to show the before/after line, and putting a border around element with css for dropping on top. To know which element I am dropping on top of, I set a global variable in the setOnOver method. Here is a simple mock up: private GQuery placeHolder = $("<div id='cellPlaceHolder' style=' outline: thin dashed #B5D5FF; height: 2px; background:#B5D5FF;'></div> "); private Element oldEl = null; options.setOnOver(new DroppableFuncti

Categories : Gwt

How to create visible items for login users?
Use a session in PHP. Make sure to use session_start() at the top of your page otherwise sessions won't be recognised. During the login process, create a session: $_SESSION['user'] = true The code to decide which menu to display should look something like this: if (isset($_SESSION['user'])) { //Menu for logged in member here } else { //Menu for logged out member here } Obviously there's other method for more dynamic web development, but this is the basic technique. Hope that helps :) EDIT: Don't forget to unset the session when logging out, otherwise the user menu will remain visible!

Categories : HTML

Android drag and drop ImageView with no option to drag again
You can add Boolean allow=true; and in onTouch add public boolean onTouch(View view, MotionEvent motionEvent) { if(allow==true){ //here you do everything and where you want to disallow the other onTouch add allow= false; } //add your return statement here }

Categories : Android

create html drop down based on items listed on a page
When the DOM is ready, find your list items and use the text of the anchors to create option elements which you can append to the select. It will make querying the DOM much easier if you add some ID's to your markup. Working Demo jQuery $(function () { var select = $('#internal-select'); var items = $('#internal-list li a').each(function () { var text = $(this).text(); select.append('<option value="' + text + '">' + text + '</option>'); }); }); HTML <li><a class="tab" href="http://">INTERNAL</a> <ul id="internal-list"> <li> <a href="http:// ">Internal docs</a></li> <li><a href="http:// ">SQL</a></li> <li><a href=" ">Downloadables</

Categories : Javascript

WPF C# Drag and Drop Drag Element as Cursor
You can use opensource like FluidKit http://fluidkit.codeplex.com/ Tutorials for the same http://blog.pixelingene.com/2006/11/drag-drop-with-attached-properties http://blog.pixelingene.com/2006/11/drag-drop-with-attached-properties-part-2 http://blog.pixelingene.com/2006/12/drag-drop-with-attached-properties-part-3 http://blog.pixelingene.com/2006/12/drag-drop-with-attached-properties-part-4 http://blog.pixelingene.com/2007/07/making-the-scrollbar-work-with-dragdropmanager http://blog.pixelingene.com/2007/11/improved-dragdropmanager-source-code

Categories : C#

jQuery UI Drag/Drop - Overflow, position fixed - FireFox drop not firing
Hei Luke, Try to add cursorAt: { bottom: 0 } in your draggable function. It should work in FF. $('#from tr').draggable({ revert: "invalid", cursorAt: { bottom: 0 }, appendTo : "#content", helper : "clone" }); Update fiddle: http://jsfiddle.net/vS3EH/11/

Categories : Jquery

Angular orderBy filter causes drag/drop to drop wrong item
They take the wrong element. https://github.com/codef0rmer/angular-dragdrop/blob/master/src/angular-dragdrop.js, line 61 -> dragModelValue does not take filters/repeats into account.

Categories : Angularjs

JQuery drag and drop position on multiple drop to one droppable area
Without reconsider the drag/drop handling clone instead of move, you can do like this. First not use multiple time the same id for more element, use a class instead or a data attribute; the following example use an attr called section. In the drop function check if there are other elements already dropped in the same section; when you drop an item you add a class correct, so you can get the number and increment the position of the top. var addTop=$( "div .correct[section='"+slotNumber+"']").length*70; ui.draggable.addClass('correct'); ui.draggable.draggable('disable'); ui.draggable.position({ of: $(this), my: 'left top+'+addTop, at: 'left top' }); Code: $(document).ready(func

Categories : Jquery

jQuery : drag and drop : find the class of the target and disable the drop
Would this work for you(fiddle): $('.content').sortable({ items: "div.item-container", //prevents objects from dragging sort: function () { $(this).removeClass("ui-state-default"); if ($(this).class != "cart-item") var position = $(this).offset(); console.log($(this).class != "cart-item"); } }); <div id="cart"> <h1 class="ui-widget-header">Demonstration Site</h1> <div class="content ui-widget-content"> <ol id="insert-zone" class="ui-droppable ui-sortable"> <div class="item-container cart-item">Item 1 <br/> <div>Dont move me here</div> </div> <div class="item-container cart-item">Item 2</div>

Categories : Javascript

HTML 5 drag and drop How to figure out whether an element accepts a drop
So - we figured out a way to do this. You can read the dataTransfer.types property which returns a list of the types added via setData. So if you use a custom string as one of those types, you can check that to verify the existence of drag data that you added. e.g. event.dataTransfer.setData("SpecialNameOfDragSource", data); Then in dragover you can see if this type exists : function ondragover(ev) { if (ev.dataTransfer.types && ev.dataTransfer.types.indexOf("SpecialNameOfDragSource") > -1) { // cancel the event } }

Categories : HTML

angularjs drag and drop plugin drop issue
The answer you're looking for: ngModel is required. Troubleshooting details below... The combination of your options are throwing some weird error Syntax Error: Token '=' implies assignment but [undefined ] can not be assigned to at column 11 of the expression [undefined = __dragItem] starting at [= __dragItem]. http://jsfiddle.net/RWgX9/ Starting from a fresh example, onDrop does indeed work: http://jsfiddle.net/HsNRS/ If you break it down to nothing, it still throws the error: http://jsfiddle.net/RWgX9/1/ I think ngModel might be required, because as soon as you add it, the error goes away: http://jsfiddle.net/RWgX9/2/ And adding it back to your original code, it seems to work now: http://jsfiddle.net/RWgX9/3/ Work as it, I see hey, doneeeeeee in the console... not sure what your

Categories : Javascript

Jquery ui drag drop droppable "drop" event
For some reason, setting the margin:0 auto on the .item class causes this to not function properly. Removing it fixes the issue. jsFiddle example

Categories : Jquery

WPF drag and drop C# drag image as well
You can follow the strategy outlined in the link below, which essentially creates a new window and causes the window position to be updated with the mouse cursor. http://blogs.msdn.com/b/jaimer/archive/2007/07/12/drag-drop-in-wpf-explained-end-to-end.aspx So the main points from the page are that you decorate the cursor using the Adorner. You can use the this.DragSource.GiveFeedback and other events on the DragSource event handlers to set up the Adorner. Once you have the event handler, that gives you the opportunity to do something. //Here we create our adorner.. _adorner = new DragAdorner(DragScope, (UIElement)this.dragElement, true, 0.5); _layer = AdornerLayer.GetAdornerLayer(DragScope as Visual); _layer.Add(_adorner); So you can create your own Adorner by subclassing it. You

Categories : C#

Drag and Drop with Drag Adorner
Your code is somewhat different to my working example, but I think that I can see your problem. In my code, I have a method called UpdateDragDropEffects. This method takes in an object of type DragEventArgs named e and updates the e.Effects property dependent on the value of the e.AllowedEffects property and also whether I have a valid ICommand instance to call and whether the data is of the expected type, etc. This method is called (and the DragEventArgs object passed from) two typical drag and drop methods; DragTargetPreviewDrop (handles the PreviewDrop event) and AdornedUIElementPreviewDragOver (handles the PreviewDragOver event). Setting the e.Effects property of the DragEventArgs object tells the system whether the current drag opearation is valid and should continue or not... not se

Categories : C#

Drag and Drop Jquery drop the object to box
Use the draggable's containment option, activated when dropped on the droppable: $(init); function init() { $('#makeMeDraggable').draggable(); $('#makeMeDroppable').droppable({ drop: function () { $("#makeMeDraggable").draggable("option", "containment", "#makeMeDroppable"); } }); } jsFiddle example

Categories : Jquery

Create an avatar upload form for users
you can use this class for Upload a file to server : public static class FileUpload { public static char DirSeparator = System.IO.Path.DirectorySeparatorChar; public static string FilesPath = HttpContext.Current.Server.MapPath("~\Content" + DirSeparator + "Uploads" + DirSeparator); public static string UploadFile(HttpPostedFileBase file) { // Check if we have a file if (null == file) return ""; // Make sure the file has content if (!(file.ContentLength > 0)) return ""; string fileName =DateTime.Now.Millisecond+ file.FileName; string fileExt = Path.GetExtension(file.FileName); // Make sure we were able to determine a proper extension if (null == fileExt) ret

Categories : C#

Drag and drop. Drag Source not working with extjs 3.4. Works fine with Extjs 3.0
Ok, I found the solution. Some code in ext-all-debug.js of Extjs 3.4 was causing the problem. This code was not there in the 3.0 version. To fix the problem, search for "getLocation: function(oDD) {" in ext-all-debug.js and comment out the following code. /* * The code below is to ensure that large scrolling elements will * only have their visible area recognized as a drop target, otherwise it * can potentially erronously register as a target when the element scrolls * over the top of something below it. */ el = Ext.get(el.parentNode); while (el && region) { if (el.isScrollable()) { // check whether our element is visible in the view port: region = region.intersect(

Categories : Javascript

populate a drop down menu with database users names, when a username is selected refresh showing users details
Use a form <form action="/yourpage" method="post"> <select> <option value="<?=$id; ?>"><?=$name; $></option> </select> <input type='submit'/> </form> In yourpage.php <?php if(isset($_POST)){ // load user data // or redirect with header() to preexisting page } // load view with user data ?>

Categories : PHP

Trying to create a drop-down of form fields, that is based on a number
You would use javascript, I wrote a simple sample for you. I haven't ever worked with wordpress, but this just works on it's own, and I would think you should be able to just put it in. Javascript <script type="text/javascript"> function thing(){ var num = document.getElementById("number").value; //Get the number out of the number field document.getElementById("select").innerHTML = ''; //Get rid of the placeholder, or the old ones for (var i = 0; i < num; i++){ var newOpt = document.createElement('option'); newOpt.innerHTML = i; //It'll just have a dropdown for 0 to the number newOpt.value = i; document.getElementById("select").appendChild(newOpt); } } </script> HTML <form>

Categories : Javascript

In SharePoint How to create a form that changes based on a drop down selection
Did you try Content Types ? You'll not get drop-down (however I've seen drop-down for document libraries with content types), but you can achieve your target: when creating new item you can select which type of item to create (Project or Proposal) and when you'll get fields according to that content type. All data will be stored in the same table.

Categories : Forms

On Mac, how to create a drag & drop app for a python script where the script name rather than Python shows in the MenuBar (etc.)?
I have an answer to my question, but I am hoping that someone can come up with something less complex. The solution I came up with was a Python script to create an AppleScript (ugh!), compile it into a bundle and then modify the bundle to change the allowed file extension(s), the icon and so on. I did not find a way to get drag-and-drop working when starting a wxpython script, without an AppleScript (or using py2app) and I could not get the AppleScript to work in a bundle I created, I had to use osacompile to create the bundle for me. I like better the approach here or here, where one creates the plist file "by hand" rather than than modify an externally created one as I do here, but the script below does do the job. #!/usr/bin/env python '''This script creates an AppleScript app to

Categories : Python

Cannot create form field for 'created_by' yet, because its related model 'users.User' has not been loaded yet
It seems Blogango (is it https://github.com/agiliq/django-blogango?) does not support the custom user models introduced in Django 1.5. The patch in Blogango should be pretty simple, just replace: from django.contrib.auth.models import User with: from django.contrib.auth import get_user_model User = get_user_model() in django-blogango/blogango/models.py.

Categories : Django

Knockout same form for edit and create items of an observable array
The address is not being updated because it's not an observable. Change this: function Address(address) { this.Line1 = ko.isObservable(address.Line1) ? address.Line1() : address.Line1; } to this: function Address(address) { this.Line1 = ko.observable(ko.isObservable(address.Line1) ? address.Line1() : address.Line1); } Also, in cases where you don't know if you have been given an observable or not you can use ko.utils.unwrapObservable to get the value, like this: this.Line1 = ko.observable( ko.utils.unwrapObservable(address.Line1) ); After reviewing your code more closely I think there are a couple of improvements that can be made: // Changed newAddress to observable with empty AdressModel self.newAddress = ko.observable(new Address("")); // I am assuming correct context

Categories : Knockout Js

NPE in Drag and Drop
It appears that you pass null as an int, and nullcannot be converted into an Integer (or int) int incomingIndex = Integer.parseInt(dragboard.getString()); Check the output of dragboard.getString().

Categories : Java



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