Drag and drop in Sketchware
Here is an example of implementation of a simple drag and drop operation in Sketchware. Follow the steps given below.
Updated video:
The code for drag listener used in updated video:
}
protected class myDragEventListener implements View.OnDragListener {
public boolean onDrag(View v, DragEvent event) {
final int action = event.getAction();
switch(action) {
case DragEvent.ACTION_DRAG_STARTED:
if (event.getClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)) {
vib.vibrate((long)100);
v.invalidate();
return true;
}
return false;
case DragEvent.ACTION_DRAG_ENTERED:
v.invalidate();
return true;
case DragEvent.ACTION_DRAG_LOCATION:
return true;
case DragEvent.ACTION_DRAG_EXITED:
v.invalidate();
return true;
case DragEvent.ACTION_DROP:
ImageView view = (ImageView) event.getLocalState();
((ImageView)v).setImageDrawable(view.getDrawable());
v.invalidate();
return true;
case DragEvent.ACTION_DRAG_ENDED:
v.invalidate();
if (event.getResult()) {
vib.vibrate((long)100);
showMessage("The drop was handled.");} else {
showMessage("The drop didn't work.");
}
return true;
default:
showMessage("Unknown action type received by OnDragListener.");
break;
}
return false;
}
};
{
1. Create a new project in Sketchware.
2. In main.xml, add a LinearH linear1 with width and height match_parent. Inside linear1 and a LinearV linear2 and a LinearH linear3.
For linear3 set background colour as grey.
Inside linear2 add three ImageViews with width and height 50, and scale type FIT_CENTER.
2. Add three Images and set them as images of ImageViews in linear2.
3. Add a Vibrator component vib.
4. Create two More Blocks:
i. setLongClickListener to ImageView:imageview
ii. drag_listener
Note that setLongClickListener block contains an ImageView variable imageview.
5. Define more block setLongClickListener by using following codes:
_imageview.setOnLongClickListener(new View.OnLongClickListener() {
public boolean onLongClick(View v) {
ClipData.Item item = new ClipData.Item(v.getTag().toString());
ClipData dragData = new ClipData(v.getTag().toString(), new String[]{
ClipDescription.MIMETYPE_TEXT_PLAIN }, item);
DragShadowBuilder myShadow = new View.DragShadowBuilder(_imageview);
if (Build.VERSION.SDK_INT >= 24){v.startDragAndDrop(dragData, myShadow, _imageview, 0); } else {
if (Build.VERSION.SDK_INT >= 24){v.startDragAndDrop(dragData, myShadow, _imageview, 0); } else {
v.startDrag(dragData, myShadow, _imageview, 0); }
return true;
}
});
Note that _imageview used in above code is equivalent to the variable imageview added in the More Block. If suppose you set name of ImageView variable to myimage, then you have to replace _imageview with _myimage.
6. In more block drag_listener, put following codes:
}
protected class myDragEventListener implements View.OnDragListener {
public boolean onDrag(View v, DragEvent event) {
final int action = event.getAction();
switch(action) {
case DragEvent.ACTION_DRAG_STARTED:
if (event.getClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)) {
vib.vibrate((long)100);
v.invalidate();
return true;
}
return false;
case DragEvent.ACTION_DRAG_ENTERED:
v.invalidate();
return true;
case DragEvent.ACTION_DRAG_LOCATION:
return true;
case DragEvent.ACTION_DRAG_EXITED:
v.invalidate();
return true;
case DragEvent.ACTION_DROP:
ImageView view = (ImageView) event.getLocalState();
ImageView myimageview = new ImageView(MainActivity.this);
myimageview.setImageDrawable(view.getDrawable());
LinearLayout container = (LinearLayout) v;
container.addView(myimageview);
v.invalidate();
return true;
case DragEvent.ACTION_DRAG_ENDED:
v.invalidate();
if (event.getResult()) {
vib.vibrate((long)100);
showMessage("The drop was handled.");} else {
showMessage("The drop didn't work.");
}
return true;
default:
showMessage("Unknown action type received by OnDragListener.");
break;
}
return false;
}
};
{
7. In onCreate event,
a. Use an add source directly block and put following codes:
imageview1.setTag("a");
imageview2.setTag("b");
imageview3.setTag("c");
b. Use setLongClickListener more block for the three ImageViews, as shown in image below.
c. Create new myDragEventListener and set it as OnDragListener for linear3 (the target for dropping images). To do this use following codes in an add source directly block:
myDragEventListener dragListen = new myDragEventListener();
linear3.setOnDragListener(dragListen);
8. Save and run the project.
Initial video:
Initial video:
Updated video:
The code for drag listener used in updated video:
}
protected class myDragEventListener implements View.OnDragListener {
public boolean onDrag(View v, DragEvent event) {
final int action = event.getAction();
switch(action) {
case DragEvent.ACTION_DRAG_STARTED:
if (event.getClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)) {
vib.vibrate((long)100);
v.invalidate();
return true;
}
return false;
case DragEvent.ACTION_DRAG_ENTERED:
v.invalidate();
return true;
case DragEvent.ACTION_DRAG_LOCATION:
return true;
case DragEvent.ACTION_DRAG_EXITED:
v.invalidate();
return true;
case DragEvent.ACTION_DROP:
ImageView view = (ImageView) event.getLocalState();
((ImageView)v).setImageDrawable(view.getDrawable());
v.invalidate();
return true;
case DragEvent.ACTION_DRAG_ENDED:
v.invalidate();
if (event.getResult()) {
vib.vibrate((long)100);
showMessage("The drop was handled.");} else {
showMessage("The drop didn't work.");
}
return true;
default:
showMessage("Unknown action type received by OnDragListener.");
break;
}
return false;
}
};
{
