帮助！能够拖动物品但不能将物品放进去 [英] Help! Able to Drag item but unable to Drop item into

查看：80 发布时间：2019/6/21 22:35:24 VB Javascript Visual-Studio

本文介绍了帮助！能够拖动物品但不能将物品放进去的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前正在使用Visual Studio 2005 ASPX.VB进行拖放式购物车工作.我找到了这篇文章，使用JavaScript将产品拖放到购物篮中 [ http://www.highoncoding.com/ArticleDetails.aspx?articleID=226 [ ^ ]并下载了示例尝试一下，但drop函数似乎也有问题.

这些是我正在使用的代码，并且更改了一些变量.我一直在寻找问题，但找不到它.请帮忙.在此先感谢

I''m currently working on a drag and drop shopping cart using Visual Studio 2005, ASPX.VB. I found this article, Drag and Drop Products to the Shopping Basket Using JavaScript[^]that uses javascript for the drag and drop function very useful. I''ve downloaded and tested the sample and it works well but when I try to implement it to my project, there seems to be a problem. The drag function seems to be working well but I''m unable to drop it into the Drop Zone.

I''ve read through this article, http://www.highoncoding.com/ArticleDetails.aspx?articleID=226[^] and downloaded the sample to try out but there seems to be a problem with the drop function too.

These are the codes that I am using and have changed some variable. I''ve been searching for the problem but was unable to find it. Please help. Thanks in advance

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Products2.aspx.vb" Inherits="Products2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <link href="Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
   <asp:ScriptManager ID="ScriptManager1" runat="server" />
   <div  id="dZone" style="position:absolute;top:313px; left:4px; width:300px; overflow:auto; height:300px" class="DefaultDropZoneColor">
    Shopping Cart
    Total: $ <div class="totalBox" id="divTotal">0.00</div>
    </div>
        <br />

        <asp:DataList ID="DataList1" runat="server" RepeatColumns="5" RepeatDirection="Horizontal">

            <ItemTemplate>
             <div ID="a" runat = "server" class="dragElement">
                <asp:Label ID="ProductNameLabel" runat="server" Text='<%# Eval("ProductName") %>'>
                </asp:Label><br />
                <asp:Label ID="ProductPriceLabel" runat="server" Text='<%# Eval("ProductPrice") %>'>
                </asp:Label><br />
                <br />
                 <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ProductImage") %>' /></div>
            </ItemTemplate>

        </asp:DataList>
    </form>
</body>
</html>
<script language="javascript" type="text/javascript">

var mouseState = 'up';
var clone = null;
var totalPurchase = 0.0;
var dropZoneArray = new Array(1);
dropZoneArray[0] = "dZone";
var namePattern = ".+_ProductNameLabel$"
var pricePattern = ".+_ProductPriceLabel$"
var dragElementPattern = ".+_a$";

var uniqueNumber = 1;

function ResetColor()
{
    document.getElementById("dZone").className = 'DefaultDropZoneColor';
}

function MakeElementDraggable(obj)
{
    var startX = 0;
    var startY = 0;

function InitiateDrag(e)
{
    mouseState = 'down';

    var evt = e || window.event;

    startX = parseInt(evt.clientX);
    startY = parseInt(evt.clientY);

    clone = obj.cloneNode(true);

    clone.style.position = 'absolute';
    clone.style.top = parseInt(startY) + 'px';
    clone.style.left = parseInt(startX) + 'px';

    document.body.appendChild(clone);

    document.onmousemove = Drag;
    document.onmouseup = Drop;

    return false;
}

function Drag(e)
{

    if(mouseState == 'down') {

    // only drag when the mouse is down
    var evt = e || window.event;

    var evtTarget = evt.target || evt.srcElement;

    clone.style.top = evt.clientY + 'px';
    clone.style.left = evt.clientX + 'px';

     // Check if we are in the drop Zone
    if(IsInDropZone(evtTarget))
    {

        evtTarget.className = 'highlightDropZone';
    }

    else
    {
        ResetColor();
    }

    }

}

obj.onmousedown = InitiateDrag;

}

function IsInDropZone(evtTarget)
{
    var result = false;

    // iterate through the array and find it the id exists
    for(i = 0; i < dropZoneArray.length; i++)
    {
        if(evtTarget.id == dropZoneArray[i])
        {
            result = true;
            break;
        }
    }

    return result;
}


function Drop(e)
{
       var evt = e || window.event;
       var evtTarget = evt.target || evt.srcElement;

       var dZone = document.getElementById("dZone");

        if( evt.clientX > dZone.offsetLeft && evt.clientX < (dZone.offsetLeft + dZone.offsetWidth)
            && evt.clientY > dZone.offsetTop && evt.clientY < (dZone.offsetTop + dZone.offsetHeight))
            {
                AddPrice();
            }

        document.onmouseup = null;
        document.onmousemove = null;

        document.body.removeChild(clone);
        mouseState = 'up';
        ResetColor();

}

function AddPrice()
{

   var name = GetProductName();
   var price = GetProductPrice();


    var dZone = document.getElementById("dZone");
    var textNode = document.createTextNode(ProductName);
    var priceNode = document.createTextNode(ProductPrice);

    var spaceNode = document.createTextNode(':  $');
    var paragraphElement = document.createElement('p');

    // create the delete button

    var deleteButton = document.createElement('button');
    deleteButton.value = 'Delete';
    deleteButton.innerHTML = 'Delete';
    deleteButton.onclick = DeleteItem;

    var item = document.createElement('div');
    item.id = 'itemDiv' + uniqueNumber;

    item.appendChild(paragraphElement);
    item.appendChild(textNode);
    item.appendChild(spaceNode);
    item.appendChild(priceNode);
    item.appendChild(spaceNode);
    item.appendChild(deleteButton);

    dZone.appendChild(item);

    // increment the price
    IncrementTotal(price);
    uniqueNumber++;

}

function DeleteItem(e)
{
    var evt = e || window.event;
    var evtTarget = evt.target || evt.srcElement;

    if(IsFireFox())
    {
        price = evtTarget.parentNode.childNodes[2].nodeValue;
        evtTarget.parentNode.parentNode.removeChild(evtTarget.parentNode);
    }
    else
    {
    price = evtTarget.parentElement.childNodes[2].nodeValue;
    evtTarget.parentElement.parentElement.removeChild(evtTarget.parentElement);
    }

    DecrementTotal(price);
}

function DecrementTotal(price)
{
    totalPurchase -= Math.ceil(Number(price));
    document.getElementById("divTotal").innerHTML = totalPurchase;
}

function IncrementTotal(price)
{
    totalPurchase += Math.ceil(Number(price));
    document.getElementById("divTotal").innerHTML = totalPurchase;
}

function GetProductPrice()
{
    var price = '';

    if(IsFireFox()) {
    price = (clone.childNodes[3].innerHTML);
    }
    else price = (clone.childNodes[2].innerHTML);


    return price;
}

function GetProductName()
{

    var name = '';

    if(IsFireFox())
    {
    name = clone.childNodes[1].innerHTML;

    }

    else { name = clone.childNodes[0].innerHTML;  }

   return name;
}

function IsFireFox()
{
    if(navigator.appName == 'Netscape')
     return true;
     else return false;
}

function IsMatch(id, pattern)
{
    var regularExpresssion = new RegExp(pattern);
    if(id.match(regularExpresssion)) return true;
    else return false;
}

var divElements = document.getElementsByTagName("div");

for(i=0;i<divElements.length;i++)
{

    if(IsMatch(divElements[i].id, dragElementPattern))
    {
        MakeElementDraggable(divElements[i]);
    }
}

帮助！能够拖动物品但不能将物品放进去 [英] Help! Able to Drag item but unable to Drop item into

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

帮助！能够拖动物品但不能将物品放进去 [英] Help! Able to Drag item but unable to Drop item into

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

登录关闭