Javascript 如何从一个div拖放到另一个div_Javascript_Jquery_Css_Html

Javascript 如何从一个div拖放到另一个div

javascript jquery css html

Javascript 如何从一个div拖放到另一个div,javascript,jquery,css,html,Javascript,Jquery,Css,Html,有人能帮我吗当我拖动“iphone”时，它会进入“购物车”，但我不希望它进入“其他购物车” 当我从另一个分区拖动“Lolcat衬衫”时，它将转到“其他购物车”，但我不希望它转到“购物车” 我想告诉大家的是，产品元素想进入购物车，其他元素想进入其他购物车请参阅下面我的代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

有人能帮我吗

当我拖动“iphone”时，它会进入“购物车”，但我不希望它进入“其他购物车”

当我从另一个分区拖动“Lolcat衬衫”时，它将转到“其他购物车”，但我不希望它转到“购物车”

我想告诉大家的是，产品元素想进入购物车，其他元素想进入其他购物车

请参阅下面我的代码：

<!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>
    <meta charset="utf-8" />
    <title>jQuery UI Droppable - Shopping Cart Demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <style>
        h1 { padding: .2em; margin: 0; }
        #products { float: left; width: 500px; margin-right: 2em; }
        #cart { width: 200px; float: left; margin-top: 1em; }
        #cart ol { margin: 0; padding: 1em 0 1em 3em; }
    </style>
    <script>
        $(function() {

            $("#catalog").accordion();

            $("#catalog li").draggable({
                appendTo: "body",
                helper: "clone"
            });

            $("#cart ol").droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-state-hover",
                accept: ":not(.ui-sortable-helper)",
                drop: function(event, ui) {
                    $(this).find(".placeholder").remove();
                    $("<li></li>").text(ui.draggable.text()).appendTo(this);
                }
            }).sortable({
                items: "li:not(.placeholder)",
                sort: function() {
                    // gets added unintentionally by droppable interacting with sortable
                    // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
                    $(this).removeClass("ui-state-default");
                }
            });

        });
    </script>
</head>
<body>
    <div id="products">
        <h1 class="ui-widget-header">Products</h1>
        <div id="catalog">
            <h2><a href="#">Gadgets</a></h2>
            <div>
                <ul>
                    <li>iPhone</li>
                    <li>iPod</li>
                    <li>iPad</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="products">
        <h1 class="ui-widget-header">Other</h1>
        <div id="catalog">
            <h2><a href="#">T-Shirts</a></h2>
            <div>
                <ul>
                    <li>Lolcat Shirt</li>
                    <li>Cheezeburger Shirt</li>
                    <li>Buckit Shirt</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="cart">
        <h1 class="ui-widget-header">Shopping Cart</h1>
        <div class="ui-widget-content">
            <ol>
                <li class="placeholder">Add your items here</li>
            </ol>
        </div>
    </div>
    <div id="cart">
        <h1 class="ui-widget-header">Other Cart</h1>
        <div class="ui-widget-content">
            <ol>
                <li class="placeholder">Add your items here</li>
            </ol>
        </div>
    </div>
</body>
</html>


jQueryUI可拖放-购物车演示
h1{填充：.2em；边距：0；}
#产品{浮动：左；宽度：500px；右边距：2em；}
#购物车{宽度：200px；浮动：左侧；边距顶部：1em；}
#购物车ol{边距：0；填充：1em 0 1em 3em；}
$（函数（）{
$（“#目录”）.accordion（）；
$（“#目录li”）。可拖动({
附：“身体”，
助手：“克隆”
});
$（“#cart ol”）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“：非（.ui可排序帮助程序）”，
drop：函数（事件、用户界面）{
$（this.find（“.placeholder”）.remove（）；
$（“”）.text（ui.draggable.text（））.appendTo（this）；
}
}).可排序({
项目：“li:非（.占位符）”，
排序：函数（）{
//通过Dropable与sortable交互意外添加
//使用connectWithSortable修复了这一问题，但不允许您自定义活动/悬停类选项
$（this.removeClass（“ui状态默认”）；
}
});
});
产品

iPhone
iPod
iPad

其他

棒棒糖衬衫
奶酪汉堡衬衫
布基特衬衫

购物车
在此处添加您的项目
其他购物车
在此处添加您的项目

如果我错了，请纠正我，但我认为您的意思是您只希望将其他产品添加到其他购物车，而不希望将产品添加到其他购物车

在这种情况下，您可以唯一地标识两个购物车和两个目录，而不是两个都具有相同的id，例如：

...<h1 class="ui-widget-header">Other</h1>
       <div id="catalogO">...

然后添加两个可拖放功能，每个购物车一个，例如：

$("#cartP ol").droppable({
     activeClass: "ui-state-default",
     hoverClass: "ui-state-hover",
     accept: "#catalogP li",
     drop: function(event, ui) {
         $(this).find(".placeholder").remove();
         $("<li></li>").text(ui.draggable.text()).appendTo(this);
     }
 }).sortable({
     items: "li:not(.placeholder)",
     sort: function() {
         // gets added unintentionally by droppable interacting with sortable
         // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
         $(this).removeClass("ui-state-default");
     }
 });

 $("#cartO ol").droppable({
     activeClass: "ui-state-default",
     hoverClass: "ui-state-hover",
     accept: "#catalogO li",
     drop: function(event, ui) {
         $(this).find(".placeholder").remove();
         $("<li></li>").text(ui.draggable.text()).appendTo(this);
     }
 }).sortable({
     items: "li:not(.placeholder)",
     sort: function() {
         // gets added unintentionally by droppable interacting with sortable
         // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
         $(this).removeClass("ui-state-default");
     }
 });

$（“#cartP ol”）.可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“#catalogP li”，
drop：函数（事件、用户界面）{
$（this.find（“.placeholder”）.remove（）；
$（“”）.text（ui.draggable.text（））.appendTo（this）；
}
}).可排序({
项目：“li:非（.占位符）”，
排序：函数（）{
//通过Dropable与sortable交互意外添加
//使用connectWithSortable修复了这一问题，但不允许您自定义活动/悬停类选项
$（this.removeClass（“ui状态默认”）；
}
});
$（“#cartO ol”）。可拖放({
activeClass：“ui状态默认值”，
hoverClass:“ui状态悬停”，
接受：“#catalogO li”，
drop：函数（事件、用户界面）{
$（this.find（“.placeholder”）.remove（）；
$（“”）.text（ui.draggable.text（））.appendTo（this）；
}
}).可排序({
项目：“li:非（.占位符）”，
排序：函数（）{
//通过Dropable与sortable交互意外添加
//使用connectWithSortable修复了这一问题，但不允许您自定义活动/悬停类选项
$（this.removeClass（“ui状态默认”）；
}
});

基本上，重要的是将可拖放函数的accept属性更改为可拖放函数的ID或类。这将只允许将具有该ID的组件拖放到可拖放组件中

我相信有更有效的方法可以做到这一点，但更改accept属性是解决问题的一个很好的快速开始，也就是说，如果这是您的问题，如果不是，请更清楚地说明。Thanx.

这里一切正常。对不起，在我写完之前，Pravin意外提交了。此外，如果您决定为不同的div使用唯一的id，请记住也要调整您的css。

$("#catalogP li").draggable({
    appendTo: "body",
    helper: "clone"
});

$("#catalogO li").draggable({
     appendTo: "body",
     helper: "clone"
});

$("#cartP ol").droppable({
     activeClass: "ui-state-default",
     hoverClass: "ui-state-hover",
     accept: "#catalogP li",
     drop: function(event, ui) {
         $(this).find(".placeholder").remove();
         $("<li></li>").text(ui.draggable.text()).appendTo(this);
     }
 }).sortable({
     items: "li:not(.placeholder)",
     sort: function() {
         // gets added unintentionally by droppable interacting with sortable
         // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
         $(this).removeClass("ui-state-default");
     }
 });

 $("#cartO ol").droppable({
     activeClass: "ui-state-default",
     hoverClass: "ui-state-hover",
     accept: "#catalogO li",
     drop: function(event, ui) {
         $(this).find(".placeholder").remove();
         $("<li></li>").text(ui.draggable.text()).appendTo(this);
     }
 }).sortable({
     items: "li:not(.placeholder)",
     sort: function() {
         // gets added unintentionally by droppable interacting with sortable
         // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
         $(this).removeClass("ui-state-default");
     }
 });