Question

我试图使用HTML5拖放制作一个小型图片游戏，但我正在消失物品。

如果一个目标div已经有一个孩子，并且我意外地将一个可拖动的项目放在它上面，那么可拖动的消失了。我添加了一行

if（ev.target.hasChildNodes（））{return; }

正如之前海报中提到的这个问题，但这似乎只对底部的源图片行进行操作，这意味着你永远不能将某些内容拖回到它上面（这会很有帮助）。我想要停止的是在顶部div中占据空间的多个项目

有用的指导吗？

我的HTML

＆＃13;

NSURL *reqUrl = [NSURL URLWithString:self.dataModel.apiUrl];
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:reqUrl];
NSString *boundary = @"---------------------------14737809831466499882746641449";
NSString *contentType = [NSString stringWithFormat:@"multipart/form-data; boundary=%@",boundary];
[request addValue:contentType forHTTPHeaderField: @"Content-Type"];
[request setHTTPMethod:@"POST"];


NSDictionary *requestBody = self.dataModel.requestParams2;
UIImage *imageToUpload = [requestBody objectForKey:keyUploadImage];
    if(requestBody){
        NSMutableData *body = [NSMutableData data];
          float low_bound = 0;
    float high_bound =5000;
    float rndValue = (((float)arc4random()/0x100000000)*(high_bound-low_bound)+low_bound);//image1
    int intRndValue = (int)(rndValue + 0.5);
    NSString *str_image1 = [@(intRndValue) stringValue];


    NSData *imageData = UIImageJPEGRepresentation(imageToUpload, 0);
    [body appendData:[[NSString stringWithFormat:@"--%@\r\n", boundary] dataUsingEncoding:NSUTF8StringEncoding]];
    [body appendData:[[NSString stringWithFormat:@"Content-Disposition: form-data; name=\"uploadedfile1\"; filename=\"%@.jpeg\"\n",str_image1] dataUsingEncoding:NSUTF8StringEncoding]];
    [body appendData:[@"Content-Type: application/octet-stream\r\n\r\n" dataUsingEncoding:NSUTF8StringEncoding]];
    [body appendData:imageData];
    [body appendData:[@"\r\n" dataUsingEncoding:NSUTF8StringEncoding]];
    [body appendData:[[NSString stringWithFormat:@"--%@--\r\n", boundary] dataUsingEncoding:NSUTF8StringEncoding]];

    [request setHTTPBody:body];
}
   [request setHTTPShouldHandleCookies:NO];
   [request setTimeoutInterval:30];
[NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue]
                       completionHandler:^(NSURLResponse *response, NSData *data, NSError *error)

 {
              NSLog(@"completionHandler with response:%@",[NSHTTPURLResponse localizedStringForStatusCode:[(NSHTTPURLResponse*)response statusCode]]);
     NSLog(@"reponse: %ld",(long)[(NSHTTPURLResponse*)response statusCode]);

     NSInteger status = [(NSHTTPURLResponse*)response statusCode];

     if(error){
         NSLog(@"http request error: %@", error.localizedDescription);
         // handle the error
     }
     else{
         if (status == 200){
             // handle the success
         }
         else{
             NSLog(@"error");
         }   // handle the error
     }


     }];

＆＃13;

function allowDrop(ev)
{
  ev.preventDefault();
}

function drag(ev)
{
  ev.dataTransfer.setData("content",ev.target.id);
}

function drop(ev)
{
  ev.preventDefault();
  
  if (ev.target.hasChildNodes()) { return; }
  
  var image =ev.dataTransfer.getData("content");
	
  if (ev.target.id == document.getElementById(image).getAttribute('data-div')){ 
	
	  ev.target.appendChild(document.getElementById(image));
	  
	}
  else{
	  ev.target.appendChild(document.getElementById(image));
  }
}

＆＃13;

.cubeContainer {
    height: 450px;
    width: 110px;
}
.cubeReceiver {
    height: 210px;
    width: 210px;
}
#div1 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div2 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div3 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div4 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div5 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div6 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div7 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#div8 {
    width: 100px;
    height: 100px;
    padding: 0px;
    border: 1px solid #aaaaaa;
	float: left;
}
#highlight {
		background-color: blue;
	}
#drag1results {
    background-color: #FF0004;
	width: 20px;
	height: 20px;
	border: 1px solid #aaaaaa;
}
#drag2results {
    background-color: #FF0004;
	width: 20px;
	height: 20px;
	border: 1px solid #aaaaaa;
}
#drag3results {
    background-color: #FF0004;
	width: 20px;
	height: 20px;
	border: 1px solid #aaaaaa;
}
#drag4results {
    background-color: #FF0004;
	width: 20px;
	height: 20px;
	border: 1px solid #aaaaaa;
}

＆＃13;

Answer 1

更改

if (ev.target.hasChildNodes()) { return; }

到

if (ev.target.tagName=="IMG") { return; }

因为当您检查ev.target时，ev.target等于IMG标记而不是DIV标记。

HTML5拖放 - 如果容器已有子项，则防止丢弃

1 个答案: