PDA

View Full Version : drag element between 2 droppable element



sj_tt6
26 Jul 2010, 12:34 PM
Hi,

I have a problem with dragging elements from one droppable element to another droppable. The dragged elements always go back to the first droppable. Can somebody show me a hint?

sj_tt6
26 Jul 2010, 12:40 PM
Below is my code:



//1st droppable: edit area
new Ext.util.Droppable('edit', {
validDropMode: 'contains',
listeners: {
drop: function(droppable, draggable, e) {
if (!e)
{
e = window.event;
}
alert(e.type);
...
}
}
});

//2nd droppable: recycle bin
new Ext.util.Droppable('bin', {
validDropMode: 'intersect',
listeners: {
drop: function(droppable, draggable, e) {
if (!e)
{
e = window.event;
}
alert("IN BIN: " + e.type);
...
}
}
});

sj_tt6
26 Jul 2010, 12:52 PM
Below is my code:



//1st droppable: edit area
new Ext.util.Droppable('edit', {
validDropMode: 'contains',
listeners: {
drop: function(droppable, draggable, e) {
if (!e)
{
e = window.event;
}
alert(e.type);
...
}
}
});

//2nd droppable: recycle bin
new Ext.util.Droppable('bin', {
validDropMode: 'intersect',
listeners: {
drop: function(droppable, draggable, e) {
if (!e)
{
e = window.event;
}
alert("IN BIN: " + e.type);
...
}
}
});

evant
26 Jul 2010, 4:40 PM
There isn't really enough info here. We have a better chance of helping you if it's something we can run locally.

sj_tt6
27 Jul 2010, 7:35 AM
Hi Evan,
The images are originally in a container. The user drags images to the edit area. Then the user can remove an image by dragging it to the recycle bin and the image redisplay in the container. I can drag the image to the droppable edit area (a canvas), the image displays fine in that area. But how can I make image redisplay in the container by dragging it from the droppable edit area to the droppable recycle bin? If I set the image's visibility = visible the image disappears. I also tried to make the container droppable. In that case I don't need the recycle bin. But the image always goes back to the container when I drag it to the droppable edit area.



//the container in the HTML page:
<div id='container'>
<img class="image" id="img_1" src="images/holliday.jpg" border="0"
longdesc="{&quot;o_loc&quot;:&quot;container&quot;,&quot;id&quot;:&quot;img_1&quot;,&quot;src&quot;:&quot;images/holliday.jpg&quot;, &quot;minimize&quot;:1, &quot;center_x&quot;:0, &quot;center_y&quot;:0}"/>

</div>


And the javascript:




// create the droppable edit area
new Ext.util.Droppable('edit', {
validDropMode: 'contains',
listeners: {
drop: function(droppable, draggable, e) {
if (!e)
{
e = window.event;
}

if (e.target)targ = e.target;
else if (e.srcElement)targ = e.srcElement;
if (targ.nodeType == 3)
targ = targ.parentNode;

var x, y;
canvas = document.getElementById('edit');
var x_offset = canvas.offsetLeft;
var y_offset = canvas.offsetTop;

alert("CANVAS ( " + x_offset + ", " + y_offset + "). Image (" + targ.x + ", " + targ.y + ")");

//coord. of the mouse
var final_x = (targ.x - x_offset) + (targ.width / 2);
var final_y = (targ.y - y_offset) + (targ.height / 2);

// reads longDesc att
var temp = unescape(targ.longDesc);
var i = temp.indexOf("{");
var long_desc = temp.substring(i);
var json_desc = eval('('+long_desc+')');
// sets the image center
json_desc.center_x = final_x;
json_desc.center_y = final_y;

var i_width = targ.width;
var i_height = targ.height;
var minimize = json_desc.minimize;

// resizes the image
if (minimize == 1) {
targ.style.width = (i_width / 2) + 'px';
targ.style.height = (i_height / 2) + 'px';
json_desc.minimize = 0;
}

// modifies json and attribute
json_desc.loc = "edit";
var json_text = JSON.stringify(json_desc);
targ.longDesc = json_text;
} //drop func
}//listener
});

// Create the droppable recycle bin
new Ext.util.Droppable('bin', {
validDropMode: 'intersect',
listeners: {
drop: function(droppable, draggable, e) {
if (!e)
{
e = window.event;
}
if (e.target)targ = e.target;
else if (e.srcElement)targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;

var parent_div = targ.parentElement;
var temp = unescape(targ.longDesc);
var i = temp.indexOf("{");
var desc = temp.substring(i);
var json_desc = eval('('+desc+')');

var from = json_desc.loc;
if (from) { //check if the image is dragged from the edit area
var id = json_desc.id;
var src = json_desc.src;
var o_loc = json_desc.o_loc;

// get the container element that has all images
var o_element = document.getElementById(o_loc);

// how to redisplay this image in the container?

}
}
}
});

sj_tt6
29 Jul 2010, 1:08 PM
Any one?

evant
29 Jul 2010, 6:08 PM
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Drag &amp; Drop</title>
<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css">
<script type="text/javascript" src="../../ext-touch-debug.js"></script>
<script type="text/javascript" src="index.js"></script>

<style>
body {
background-color: #7B7B7B;
}

#draggable, #invalid {
width: 100px;
height: 100px;
background-color: #5283D1;
top: 170px;
left: 5px;
position: absolute;
z-index: 1;
-webkit-border-radius: 4px;
padding-top: 40px;
text-align: center;
color: rgba(0,0,0,.5);
border-bottom: 1px solid rgba(0,0,0,.3);
}

#invalid {
left: 130px;
}

#draggable.x-dragging,
#invalid.x-dragging {
background-color: #2066C2;
}

.droppable {
text-align: center;
-webkit-border-radius: 4px;
color: rgba(0,0,0,.5);
border-top: 1px solid rgba(0,0,0,.3);
padding-top: 60px;
height: 150px;
width: 310px;
background-color: #435699;
position: absolute;
}

#drop1{
left: 5px;
top: 5px;
}

#drop2{
left: 320px;
top: 5px;
}

.droppable.x-drop-active {
background-color: #44935E;
}

.droppable.x-drop-hover {
background-color: #295A3A;
}

.droppable.x-drop-invalid {
background-color: #932D2E;
}
</style>
</head>

<body>
<div id="drop1" class="droppable">Droppable</div>
<div id="drop2" class="droppable">Droppable</div>
<div id="draggable">Draggable</div>
<div id="invalid">Draggable</div>
</body>

</html>




// Setup the Sencha Touch app.
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){
// Create a new draggable for the div with an
// id of 'draggable'
new Ext.util.Draggable('draggable', {
//revert: true
});

// Create a new draggable for the div with an
// id of 'invalid
new Ext.util.Draggable('invalid', {
// Specify a group that won't have a valid
// Droppable target
group: 'invalid',
// Revert the Draggable back to its original
// position on an invalid drop.
revert: true
});

// Create a new Droppable for the div with an
// id of 'droppable'
new Ext.util.Droppable('drop1', {
// Change the validDropMode from the default of 'intersect' to
// 'contains' this ensures that a Draggable must be completed
// contained by the Droppable in order to perform a drop
validDropMode: 'contains',
listeners: {
drop: function(droppable, draggable, e) {
draggable.el.setHTML('Dropped!');
}
}
});

new Ext.util.Droppable('drop2', {
// Change the validDropMode from the default of 'intersect' to
// 'contains' this ensures that a Draggable must be completed
// contained by the Droppable in order to perform a drop
validDropMode: 'contains',
listeners: {
drop: function(droppable, draggable, e) {
draggable.el.setHTML('Dropped!');
}
}
});
}
});


You'll see the droppable doesn't move when you drop it.

sj_tt6
30 Jul 2010, 9:37 AM
Hi Evan,

If we don't set revert to true then the item can be dragged and dropped to any place in the page. Is there any way to set the item to be dropped only at defined droppable areas?
Thanks!

nderraugh
20 Jun 2011, 8:47 AM
bump

digil
20 Jun 2011, 9:10 AM
You just bumped a 11 month old post. Feel free to add any details.

nderraugh
20 Jun 2011, 9:16 AM
I don't have anything else to add really. I am having the same problem as sj_tt6. He asked, "Is there any way to set the item to be dropped only at defined droppable areas?" I would like to know the answer to that question. I want the draggable to stay put, not revert back despite the droppable successfully consuming the drop event.

MattUCG
25 Oct 2011, 11:10 AM
Rather than creating a new thread, I'll post my code here which demonstrates the issue. Whichever Droppable object is created last works. The first Droppable created will not accept the Draggable. Any help will be appreciated.

EDIT: Yes, commenting out revert: true does allow the Draggable to move from one Droppable to the other, but also allows the Draggable to be moved to invalid locations.


MobileDemo = new Ext.Application({
name: "MobileDemo",
launch: function () {
this.viewport = new Ext.TabPanel({
fullscreen: true,
items: [{xtype: 'TestPanel', title: 'Test'}],
});
}
});


MobileDemo.TestPanel = Ext.extend(Ext.Panel, {
layout: {
type: 'hbox',
align: 'start',
pack: 'start'
},
initComponent: function () {
MobileDemo.TestPanel.superclass.initComponent.call(this);


this.recentOption = new Ext.Button({
iconCls: 'time',
iconMask: true,
ui: 'small',
text: 'Recent',
iconAlign: 'top',
revert: true,
});


this.droppablePanel1 = new Ext.Panel({
height: 200,
width: 200,
style: 'background-color: blue'
});


this.droppablePanel2 = new Ext.Panel({
height: 200,
width: 200,
style: 'background-color: red'
})


this.add(this.recentOption);
this.add(this.droppablePanel1);
this.add(this.droppablePanel2);
this.doLayout();


this.addListener('beforeactivate', function() {


new Ext.util.Draggable(this.recentOption.id, {
revert: true,
group: 'icons',
});

new Ext.util.Droppable(this.droppablePanel1.id, {
validDropMode: 'contains',
group: 'icons',
});

new Ext.util.Droppable(this.droppablePanel2.id, {
validDropMode: 'contains',
group: 'icons',
});
});
}
});


// register xtype
Ext.reg('TestPanel', MobileDemo.TestPanel);