Rectangle 27 2

This is because tabs hide the container and all it's content on change. Even if you try to set items to show using activate event since main container is already hidden it won't show individual items. So you have to literally move draggable items into droppable area. Here is the code.

<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a>

        </li>
        <li><a href="#fragment-2"><span>Two</span></a>

        </li>
        <li><a href="#fragment-3"><span>Three</span></a>

        </li>
    </ul>
    <div id="fragment-1">
        <div id="draggable" class="ui-widget-content">
            <p>Drag me to my target</p>
        </div>
    </div>
    <div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
    <div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
#draggable {
    width: 100px;
    height: 100px;
    padding: 0.5em;
    margin: 10px 10px 10px 0;
}
#droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    margin: 10px;
}
$("#tabs").tabs();
$("#draggable").draggable();
$("#droppable").droppable({
    drop: function (event, ui) {
        var $x = ui.draggable;
        $x.appendTo($("#droppable")).css({
            top:0,
            left:0
        });
        $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
    }
});

jQuery UI drag and drop with tabs - drag an element from tabs to dropp...

jquery jquery-ui jquery-ui-tabs jquery-ui-draggable jquery-ui-droppable
Rectangle 27 5

This is a very basic example but should be applicable for several different cases. I took the jQuery UI Draggable + Sortable example and besides the .sortable() widget I bound the .droppable() widget to the <ul id="sortable"> element. Even though not the smartest way in the drop event of the droppable widget I check the value of a variable to identify the origin of the moved element. (does it come from the sortable list or from one of my draggables?) If it does come from one of the draggables I change the HTML of it to what I want. Otherwise it remains the same (because you just rearrange the order of the sortable)

<ul>
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<br />
<br />
<br />
<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>
$(function () {
     var origin = 'sortable';
     $("#sortable").droppable({
         drop: function (event, ui) {
             if (origin === 'draggable') {
                 ui.draggable.html('<span>Look at this new fancy HTML!</span>');
                 console.log(ui.draggable);
                 origin = 'sortable';
             }
         }
     }).sortable({
         revert: true
     });
     $("#draggable").draggable({
         connectToSortable: "#sortable",
         helper: "clone",
         revert: "invalid",
         start: function () {
             origin = 'draggable';
         }
     });

 });

Quite a boring example because the new HTML is static. But let's say you have a custom helper for each draggable and this should become your new HTML. Therefore you e.g. have stored some HTML fragments in an array and choose the matching entry suitable to the index or what so ever. This would somehow look like that:

Pretty sure you could also achieve the same result by avoiding the helper variable and use ui.helper instead but I couldn't figure out how to get the HTML portion of it. If this doesn't work how you need it, just inform me. Altogether I think you can use my examples as a start for different goals concerning to change the HTML of the dropped element.

var helpersArr = ['<input type="text" />', '<input type="file" />', '<input type="submit" value="Save" />'];

jquery draggable +sortable with custom html on drop event? - Stack Ove...

jquery jquery-ui jquery-ui-draggable jquery-ui-droppable
Rectangle 27 7

This is not a "silver bullet" , but I'll go ahead and post this as an answer, but I'm not sure how much value it will have for you. I tracked down a key function in jQuery UI that might be what you're looking for. It's in $.ui.ddmanager (the drag and drop manager), and the function is prepareOffsets. This line:

m[i].offset = m[i].element.offset();

seems to be the one that is setting up the offset for use when the element is actually dropped. This might be a place to fiddle with to adjust the resulting offset based on whether the droppable element is a child of the iframe.

There is another function above it $.ui.intersect that performs the logic to see if the draggable and droppable are intersecting each other.

I'm in the latest release of jQuery UI, and the file is jquery-ui-1.8.14.custom.js on line 2012-2029. If you get the single droppable file itself, jquery.ui.droppable.js, it's on lines 203-220. And these are the dev files, not the min files.

Thank you for your efforts! I've prepared a working fiddle with the reported function to start playing with it! jsfiddle.net/DQdZ9/35

Check this, seems it works much better after the offset has been modified... maybe this is the way to go! jsfiddle.net/DQdZ9/48

javascript - Drag and drop elements into an iframe. Droppable area has...

javascript jquery-ui iframe drag-and-drop yui
Rectangle 27 1

to give mouseover effect in javascript we have to use jquery-ui.js and jquery.ui.touch-punch.min.js, from ui js we get two important function droppable(); and draggable(); which allows the element to drag and drop but this override draggable = true in HTML5 so if we want to use same code for dekstop as well as phone then use as follows

//media query 
 var mq = window.matchMedia( "(max-width: 992px)" );

 if (mq.matches) {
    // window width is at less than 992px
    jqueryobject.draggable();
 }
 else {
    // window width is at gratet than 992px
 }

so we can run same code in dekstop as well as mobile now the second important point, In HTML5 we use dragstart(), dragleave(), dragover(), drop() for different opration related to drag and drop but in mobile we required touchstart(), touchmove(), touchend() and touchcancel() for drag and drop which we get from jquery.ui.touch-punch.min.js, but for mouse over effect we have to use logic as follows

<div id=drag_el > and <div id=drop_el>

when we drag element touchmove event is fire so in that use

var elementTouching = document.elementFromPoint(first.clientX,first.clientY);
      if(elementTouching.id == "drop_el") {
          //apply u'r css effect like
           elementTouching.style.zoom = "120%";
        }
      else{
          // apply normalize effect of css like
            elementTouching.style.zoom = "100%";
       }

html - Hover effect on mobile touch devices (iPhone, Android, Windows)...

html css mobile hover
Rectangle 27 1

to give mouseover effect in javascript we have to use jquery-ui.js and jquery.ui.touch-punch.min.js, from ui js we get two important function droppable(); and draggable(); which allows the element to drag and drop but this override draggable = true in HTML5 so if we want to use same code for dekstop as well as phone then use as follows

//media query 
 var mq = window.matchMedia( "(max-width: 992px)" );

 if (mq.matches) {
    // window width is at less than 992px
    jqueryobject.draggable();
 }
 else {
    // window width is at gratet than 992px
 }

so we can run same code in dekstop as well as mobile now the second important point, In HTML5 we use dragstart(), dragleave(), dragover(), drop() for different opration related to drag and drop but in mobile we required touchstart(), touchmove(), touchend() and touchcancel() for drag and drop which we get from jquery.ui.touch-punch.min.js, but for mouse over effect we have to use logic as follows

<div id=drag_el > and <div id=drop_el>

when we drag element touchmove event is fire so in that use

var elementTouching = document.elementFromPoint(first.clientX,first.clientY);
      if(elementTouching.id == "drop_el") {
          //apply u'r css effect like
           elementTouching.style.zoom = "120%";
        }
      else{
          // apply normalize effect of css like
            elementTouching.style.zoom = "100%";
       }

html - Hover effect on mobile touch devices (iPhone, Android, Windows)...

html css mobile hover
Rectangle 27 0

Not sure that it is exactly what you want, but here is a good start for your : http://jsfiddle.net/x5T4h/2/

Basically, I removed the second draggable object declaration, and I added clone function to duplicate your element inside drop event $( ui.draggable ).clone().appendTo( this );

$(function() {
    $( "ul li" ).each(function(){
        $(this).draggable({
            helper: "clone"
        });
    });

    $( ".day" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            var targetElem = $(this).attr("id");
            $( ui.draggable ).clone().appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});

Yes this is perfect, thank you very much. You wouldn't happen to know off the top of your head if there's a way for the user to drag DIVs between columns (i.e to reorganize them) and then to be able to remove it completely from a column by dragging it away? If not it's ok don't worry about it. Thanks

Just call the draggable plugin on the cloned element. For removing, set up another drop target that checks if the element is a clone and if so, removes it from the DOM.

breaks with 1.11.0, can you let me know why it only runs with 1.8.3

draggable - jQuery UI Multiple Droppable - drag whole div element & cl...

jquery-ui draggable droppable
Rectangle 27 0

you can use Rapheal.js It could be done by applying simple jquery drag and drop, Make our html element draggable and your rapheal paper div droppable. Here is code

<table style = "width:600px; border:1 px solid black;">
       <tr>
         <td>
           <div id="divDragable" class="ui-widget-content">
    <p>Drag me around</p>
           </div>
         </td>

         <td>
         <div id="divDroppable">
           </div>
         </td>

       </tr>
    </table>
$(function () {

    //--- Draggable

    $("#divDragable").draggable();

    //-------------------- Code for Raphael---------------------
    var paper = Raphael("divDroppable", 200, 200);

    // Making SVG droppable
    $("#divDroppable").droppable({
        drop: function (event, ui) {
            // get targeted SVG elemnet by
            // event.originalEvent.target
        }

    });

    var recatngleObj1 = paper.rect(10, 15, 50, 30, 2);
    recatngleObj1.attr("id", "emptyRect");
    recatngleObj1.dropShadow(2, 3, 3, 1);
    recatngleObj1.attr("fill", "#B3E6FF");

});

javascript - Possible to drag an HTML dom element & drop onto an SVG d...

javascript jquery jquery-ui svg raphael
Rectangle 27 0

You can either create the div through JQuery and then make it droppable, or create a droppable div when the drag event begins on a draggable element and that element can be dropped on the new div created. This is possible like so:

$( "<div>Dynamic Droppable Div</div>" ).droppable( dropOptions ).appendTo( "#anotherDiv" );

javascript - Dynamically Create Droppable Element - Stack Overflow

javascript jquery jquery-ui-draggable jquery-ui-droppable
Rectangle 27 0

Found the problem. Should put all the options in one droppable Method. The following works.

drag and drop - Jquery droppable option breaks the draggable behavior ...

jquery drag-and-drop
Rectangle 27 0

This is because jQuery is defining the draggable/droppable areas via the bounding box of the element, not its visual appearance as defined in CSS. It doesn't know this information by default. Take a look at this tutorial entitled Hover and Click Trigger for Circular Elements with jQuery. Perhaps it will give you insight into how to bind the drag/drop events to only the circular area.

jquery - Round or circular Draggable/Droppables - Stack Overflow

jquery css jquery-ui draggable droppable
Rectangle 27 0

$('#external-events div.external-event').each(function() {
        // store data so the calendar knows to render an event upon drop
        $(this).data('event', {
            title: $.trim($(this).text()), // use the element's text as the event title
            stick: true // maintain when user navigates (see docs on the renderEvent method)
        });
        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 1111999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });
    });
    /* initialize the calendar
     -----------------------------------------------------------------*/
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek'
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar
        drop: function() {
            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }
        },
        eventDrop: function(event, delta, revertFunc) {
            alert( event.id );
            $.ajax({
                type: "POST",
                url: "${pageContext.request.contextPath}/task/periodic-task-update",
                data : {
                    id : event.id , 
                    date :event.start.format()
                },
                success: function(data) {
                     if(data=='Task Period Succesfully Changed'){
                        toastr.success("Task Period Succesfully Changed.");
                    }else{
                        toastr.success("Something Wrong");
                        revertFunc();
                    } 
                },
                error: function(data,textStatus,xhr) {
                    toastr.success("Something Wrong");
                    revertFunc();
                }       
            });
        },
        events: [
                <c:forEach var='periodicTask' items='${periodicTaskTemplates}'>
                    <c:forEach  varStatus="i" begin = "1" end = "12">
                        { id: '${periodicTask.id}', title: '${periodicTask.task}', start: new Date(y,  '${i.index}', '${periodicTask.startDate}'), end: new Date(y, '${i.index}', '${periodicTask.lastDate}') ,type:'${periodicTask.description}',location:'${periodicTask.location.name}'},
                    </c:forEach>
                </c:forEach>`
        ],
    });

fullcalendar - Display only allDay events in a month view full calenda...

fullcalendar
Rectangle 27 0

I would really recommend trying to find a way to make the jQuery UI draggable and droppable libraries work for you. Then the question becomes, similar to this one: How do I drag multiple elements with JavaScript or jQuery?.

Here's how we can apply one of the answers from that question to your problem. I'm using the jQuery UI multiple draggable plugin, the entire script of which can be found here: jquery.ui.multidraggable-1.8.8.js.

First let's simplify your HTML. By putting our draggable and dropable divs inside of elements, we don't have to apply redundant stylings to each one. Instead we can use the containing element to style

<div id="parent">
    <div id="dragTargets">
        <div>123</div>
        <div>456</div>
        <div>789</div>
    </div>
    <div id='dropTargets'>
        <div></div>
        <div></div>
    </div>
</div>

Using the plugin we can call multidraggable on each of the drag divs. And droppable anywhere they can be dropped

$("#dragTargets div").multidraggable();
$("#dropTargets div").droppable();

We can control the appearance with styling. As an example, we'll make anything that can receive drops yellow, anything you're about to drop as red, and anything that has received an element green.

Here's some styling as an example in CSS

.ui-state-highlight { background: green; }
.ui-state-active { background: yellow; }
.ui-state-hover { background: red; }

And we'll control when these classes are applied with JavaScript:

$("#dropTargets div").droppable({
    activeClass: "ui-state-active",
    hoverClass: "ui-state-hover",
    drop: function () {
        $(this).addClass("ui-state-highlight")
    }
});

You should style the elements that are currently selected. The script will apply the class ui-multidraggable to all the currently selected elements. The following CSS will make it apparent to the user that their choice is selected.

.ui-multidraggable {
    background: tan;
}

Check out this demo. Just hold down ctrl to select more than one of the divs and then drag all of them at once.

javascript - Unable to drop an element on mouseup event - Stack Overfl...

javascript jquery
Rectangle 27 0

Not directly answering your question, but have you tried using a javascript library such as jQuery UI? It provides good drag/drop support & you can do the sorts of things your talking about... eg. you can make certain elements of your page draggable & others droppable & then handle the events when the user drags an element around. It provides a tolerance on the dropables that includes 'touch' (as well as 'fit', 'intersect', 'pointer'), so then you could handle the 'over' event of your dropable targets & you'd get an event handler that fires when the corner of your div is over a given element. This event handler gives you a reference to the element being dragged as well as the element its being dragged over. (a bit backwards to how you asked the question, but should be usable in solving the same problems).

dhtml - raise javascript events or get an object from XY coords - Stac...

javascript dhtml
Rectangle 27 0

This is because tabs hide the container and all it's content on change. Even if you try to set items to show using activate event since main container is already hidden it won't show individual items. So you have to literally move draggable items into droppable area. Here is the code.

<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>
<div id="tabs">
    <ul>
        <li><a href="#fragment-1"><span>One</span></a>

        </li>
        <li><a href="#fragment-2"><span>Two</span></a>

        </li>
        <li><a href="#fragment-3"><span>Three</span></a>

        </li>
    </ul>
    <div id="fragment-1">
        <div id="draggable" class="ui-widget-content">
            <p>Drag me to my target</p>
        </div>
    </div>
    <div id="fragment-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
    <div id="fragment-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
#draggable {
    width: 100px;
    height: 100px;
    padding: 0.5em;
    margin: 10px 10px 10px 0;
}
#droppable {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    margin: 10px;
}
$("#tabs").tabs();
$("#draggable").draggable();
$("#droppable").droppable({
    drop: function (event, ui) {
        var $x = ui.draggable;
        $x.appendTo($("#droppable")).css({
            top:0,
            left:0
        });
        $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped!");
    }
});

jQuery UI drag and drop with tabs - drag an element from tabs to dropp...

jquery jquery-ui jquery-ui-tabs jquery-ui-draggable jquery-ui-droppable