Drag and Drop
Aug 22, 2015 12:05:52 GMT -5
Post by kokenge on Aug 22, 2015 12:05:52 GMT -5
I guess we all have done drag and drop with Run Basic by now.
HTML5 supports drag and drop, so make sure your browser has HTML5.
The problem I've had is that they always show a box to drop to. So if they accidentally drop something into the box there is no way to get it out.
A simple solution is to make the From and To boxes have the ability to 'drag from' and 'drop to'.
Assuming box 2 is what you are interested in, how do you know what they dropped in if they can pull it out again. A simple solution is to keep track of each box and what was moved into it. Using 2 <input text statements, one for the box it was dropped to, and the other to know what was dropped. Then in the end simply add or subtract the dropped values into a string..
With this method you can have as many boxes as you like. In the example I use a <TABLE> with <TD id=..... However if you like <DIV> you can that also.
The two input statements are probably better off hidden. As in: <input type=hidden instead of <input type=text.
HTML5 supports drag and drop, so make sure your browser has HTML5.
The problem I've had is that they always show a box to drop to. So if they accidentally drop something into the box there is no way to get it out.
A simple solution is to make the From and To boxes have the ability to 'drag from' and 'drop to'.
Assuming box 2 is what you are interested in, how do you know what they dropped in if they can pull it out again. A simple solution is to keep track of each box and what was moved into it. Using 2 <input text statements, one for the box it was dropped to, and the other to know what was dropped. Then in the end simply add or subtract the dropped values into a string..
With this method you can have as many boxes as you like. In the example I use a <TABLE> with <TD id=..... However if you like <DIV> you can that also.
The two input statements are probably better off hidden. As in: <input type=hidden instead of <input type=text.
head "
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData('text', ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData('text');
ev.target.appendChild(document.getElementById(data));
document.getElementById('drpTo').value = document.getElementById('drpTo').value + ev.target.id + ',';
document.getElementById('dropped').value = document.getElementById('dropped').value + data +',';
}
</script>
"
projectDir$ = "your_project"
photoPath$ = "../";projectDir$;"/photo/"
html "<input type='text' name='dropped' id='dropped' value='' size=25/><br>"
html "<input type='text' name='drpTo' id='drpTo' value='' size=25/><br>"
html "Drag image between box1 and box2"
html "<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0>"
html "<TR align=center><TD>----- Box 1 -----</TD><TD>----- Box 2 -----</TD></TR>"
html "<TR>"
html "<TD id='box1' name='box1' ondrop='drop(event)' ondragover='allowDrop(event)'>
<img id='drag1' SRC='";photoPath$;"button1.jpg' draggable='true' ondragstart='drag(event)'>
<img id='drag2' SRC='";photoPath$;"button2.jpg' draggable='true' ondragstart='drag(event)'>
<img id='drag3' SRC='";photoPath$;"button3.jpg' draggable='true' ondragstart='drag(event)'>
</TD>"
html "<TD id='box2' name='box2' ondrop='drop(event)' ondragover='allowDrop(event)'></TD>"
html "</TR></TABLE>"
button #menu,"Submit",[gimmeDrop]
wait
[gimmeDrop]
cls
dropped$ = #request get$("dropped")
drpTo$ = #request get$("drpTo")
print "--- dropped -->";dropped$
print "--- drp To -->";drpTo$
Print "=== What's in box2 ===="
i = 1
while word$(dropped,ドルi,",") <> ""
dp$ = word$(dropped,ドルi,",")
dt$ = word$(drpTo,ドルi,",")
if dt$ = "box2" then
in2$ = in2$ + dp$ + ","
else
in2$ = strRep$(in2,ドルdp$+",","")
end if
i = i + 1
wend
print "In Box 2:";in2$
end
' --------------------------------
' string replace rep str with
' --------------------------------
FUNCTION strRep$(str,ドルrep,ドルwith$)
ln = len(rep$)
ln1 = ln - 1
i = 1
while i <= len(str$)
if mid$(str,ドルi,ln) = rep$ then
strRep$ = strRep$ + with$
i = i + ln1
else
strRep$ = strRep$ + mid$(str,ドルi,1)
end if
i = i + 1
WEND
END FUNCTION