Hello. I want to do what is in the image with ZIM. I looked at your example for this but I don't know how to do it? Is a short example possible?
First of all, thank you for your answer.
So how can I access the contents of the lists after dragging and dropping? How can I check if the order is correct?
const w = 80;
const h = 60;
var confirmButton=new Rectangle(150,70,red)
stage.addChild(confirmButton)
STYLE = {
Rectangle:{width:w, height:h, color:series(blue,green,orange,yellow,pink)}
}
const items = [];
var sortNameList=[
///// the last object here will be in list2 and list will also be dragged to the 2nd row. I want to access whether the user dragged correctly or not by assigning a name. But I can't access the list.
[[1],[3],[4],[5],[2]]
]
for(var i=0; i<sortNameList[0].length-1; i++){
nesne=new Rectangle()
nesne.name=sortNameList[0][i][0]
items.push(nesne)
}
console.log(items[1].name)
const list = new List({
width:400,
height:h*1.5,
list:items,
vertical:false,
drop:true,
viewNum:2,
swipe:false
}).center().mov(0, -100);
const items2 = [];
for(var i=0; i<1; i++){
nesne=new Rectangle()
nesne.name=sortNameList[0][sortNameList.length-1][0]
items2.push(nesne)
}
const list2 = new List({
width:170,
height:90,
list:items2,
vertical:false,
drop:true,
viewNum:2,
swipe:false
}).center().mov(0,100);
list.dropTargets = list2;
list2.dropTargets = list;
confirmButton.on("click",function(){
var siralamaDurumListtesi=[]
for(var i=0; i<list.list.length; i++){
siralamaDurumListtesi.push(list.items[i])
}
console.log(list.items)
})
You can get a dropup event that tells when an items is dropped on it. And I think list.items should have changed. If you know the right order, you can store that order on each item at the start. Make an initial array with the right order. Then when you can loop through the list.items and see if the order is the correct order or the same as the original array. If that is not working, let us know and we can look later tonight or this weekend.
I know the starting order. I have it as an array. When I create objects inside items, I create them from this array.
items are as follows:
const items = ;
for(var i=0; i<sortNameList[0].length-1; i++){
object=new asset(sortNameList[0][i][1]).clone()
object.name=sortNameList[0][i][0]
items.push(object)
}
const items2 = ;
for(var i=0; i<1; i++){
object=new asset(sortNameList[0][(sortNameList[0].length-1)][1])
object.name=sortNameList[0][sortNameList[0].length-1][0]
items2.push(object)
}
I am assigning them as list and list2 items. When I move from the 2nd list to the 1st list or not, I cannot reach the name property in the items in the lists. It says undefined. I assign the name property with for. Normally, I can see the name property of the items array without assigning it to the list. After assigning it to the list, there is no name. If I reach list.items[0].name, I can do what I want.
The lion will be dragged to the 2nd row. Of course, this will be different in other questions. I am adding the lion to the 2nd list. The other animals are in the 1st list
var sortNameList=[
///// the last object here will be in list2 and the list will also be dragged to the 2nd row. I want to access whether the user is dragged correctly or not by assigning a name. But I can't access the list.
[[1,"fil.png"],[3,"horoz.png"],[4,"karga.png"],[5,"balık.png"],[2,"lion.png"]]
]
the last item of the list is the lion. the first four items in the array are in the 1st list. The number in front of each image is the sorting number. I assign this number to the name property for each item while creating items and items2.
But I can't access it as list.items[0].name.
I was able to access the name property with list.items[i].content.name. I solved this, there are a few more things about this list: sometimes the object I drag and drop does not appear.
Another issue: can the list width and height be as we wish? When list width:100, the objects inside it are of different sizes, when it is 200, they are of different sizes.
I had a similar problem with List in the past. I solved it by setting optimize:false. But that doesn't work. The image is dragged as if it is there but it is not visible.