Question

我想为购物车开发一个警报框，如果它将所有盒子安排在正确的位置，则在所有购物车装满后提醒错误警告。我的小提琴是

jsfiddle.net/ccf4Q/10/

screencast.com/t/N6IXCEBC8g6 ---如果用户填写如此警告“你填写在正确的地方”

其他“错误”

请帮我解决这个问题

Answer 1

试试这个： - http://jsfiddle.net/adiioo7/ccf4Q/11/

<强> HTML： -

<div id="products">
     <h1 id="ui-widget-header" class="ui-widget-header"><p align="center" style="font-size:30px;"></p> </h1>

    <div class="ui-widget-content">
        <ul>
            <li data-id="1" class="bank" id="bank"><a href="#" style="color:#FFFFFF;" class="button button-orange">new </a>
            </li>
            <li data-id="3" class="bank" id="loan"><a href="#" style="color:#FFFFFF;" class="button button-orange">$5</a> 
            </li>
            <li data-id="6" class="bank" id="service"> <a href="#" style="color:#FFFFFF;" class="button button-green">$-5</a>
            </li>
        </ul>
    </div>
    <table width="100%" height="100%" border="1">
        <tr>
            <td width="20%" height="100">
                <div id="shoppingCart1" class="shoppingCart">
                    <div align="center" class="ui-widget-content">
                        <ol id="place1" style="list-style:none">
                            <li class="placeholder">addyour item here
                                <br/>
                                <br/>
                            </li>
                        </ol>
                    </div>
                </div>
            </td>
            <td width="20%" height="100">Bank</td>
            <td width="20%" height="100">
                <div id="shoppingCart2" class="shoppingCart">
                    <div align="center" class="ui-widget-content">
                        <ol id="place2" style="list-style:none">
                            <li class="placeholder">addyour item here
                                <br/>
                                <br/>
                            </li>
                        </ol>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <div width="100%" id="equal"><a href="#" class="button button-green"></a>
    </div>
    <div id="m1"></div>
    <div id="m2"></div>
    <div id="m3"></div>
    <div id="m4"></div>
    <input id="btnCheckCart" type="button" value="Check Cart" />

<强> JS： -

$("#btnCheckCart").on("click", function () {
    if ($("#shoppingCart1 ol li").hasClass("placeholder")) 
        alert("Please fill shoppingCart1");
    else 
        alert("you fill at right place shoppingCart1");

    if ($("#shoppingCart2 ol li").hasClass("placeholder")) 
        alert("Please fill shoppingCart2");
    else 
        alert("you fill at right place shoppingCart2");
});

$("#products li").draggable({
    appendTo: "body",
    helper: "clone"

});
$("#shoppingCart1 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ".bank",
    drop: function (event, ui) {
        var self = $(this);
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length) return;
        var listItem = $("<li></li>", {
            "text": ui.draggable.text(),
                "data-id": productid

        });
        self.html(listItem);
        console.log($("#shoppingCart1 ol"));


        // To remove item from other shopping chart do this
        // var cartid = self.closest('.shoppingCart').attr('value');
        // $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();

    }
});
$("#shoppingCart2 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ".bank",
    drop: function (event, ui) {
        var self = $(this);
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length) return;
        var listItem = $("<li></li>", {
            "text": ui.draggable.text(),
                "data-id": productid

        });
        self.html(listItem);

        // To remove item from other shopping chart do this
        // var cartid = self.closest('.shoppingCart').attr('value');
        // $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();

    }
});

Answer 2

我认为左侧部分有效，“新”，右侧有效。但是，您可以使用所需的任何规则修改以下checkContents()函数。 jquery数据函数已用于通过添加类似

的代码将丢弃的内容存储在可放置的位置

$("#shoppingCart2 ol").data("contains",$(ui.draggable[0]).text().trim());
        if(!checkContents()){
            $("#shoppingCart2 ol").data("contains","");
            return false;
        }

在每个drop回调函数的开头。然后调用checkContent（）函数以允许或不完成删除。

http://jsfiddle.net/p3qW4/

如果小提琴不可用，则发布完整代码。

<强> JS

$("#products li").draggable({
    appendTo: "body",
    helper: "clone"

});
$("#shoppingCart1 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept:".bank",
    drop: function(event, ui) {
                $("#shoppingCart1 ol").data("contains",$(ui.draggable[0]).text().trim());
        if(!checkContents()){
            $("#shoppingCart1 ol").data("contains","");
            return false;
        }

        var self = $(this);
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
       if (self.find("[data-id=" + productid + "]").length) return;
        var listItem = $("<li></li>", {
           "text": ui.draggable.text(),
           "data-id": productid

        });
        self.html(listItem);

        // To remove item from other shopping chart do this
   // var cartid = self.closest('.shoppingCart').attr('value');
    // $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();

    }
});
$("#shoppingCart2 ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept:".bank",
    drop: function(event, ui) {
        $("#shoppingCart2 ol").data("contains",$(ui.draggable[0]).text().trim());
        if(!checkContents()){
            $("#shoppingCart2 ol").data("contains","");
            return false;
        }

        var self = $(this);
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
       if (self.find("[data-id=" + productid + "]").length) return;
        var listItem = $("<li></li>", {
           "text": ui.draggable.text(),
           "data-id": productid

        });
        self.html(listItem);
        // To remove item from other shopping chart do this
   // var cartid = self.closest('.shoppingCart').attr('value');
    // $(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();

    }
});

function checkContents(){
    var allValid = true;

    if($("#shoppingCart1 ol").data("contains")&&$("#shoppingCart1 ol").data("contains")!="new"){
        allValid=false;
    }
    else if($("#shoppingCart2 ol").data("contains")&&$("#shoppingCart2 ol").data("contains")=="new"){
        allValid=false;
    }

    if(allValid){
        alert("you fill at right place");
        return true;
    }else{
        alert("wrong");
        return false;
    }
}

<强> HTML

<div id="products">
    <h1 id="ui-widget-header" class="ui-widget-header"><p align="center" style="font-size:30px;"></p> </h1>
    <div class="ui-widget-content">
        <ul>
            <li data-id="1" class="bank" id="bank"><a href="#" style="color:#FFFFFF;" class="button button-orange">new </a></li>

            <li data-id="3" class = "bank" id="loan" ><a href="#" style="color:#FFFFFF;" class="button button-orange">$5</a> </li>

            <li data-id="6" class="bank" id="service"> <a href="#" style="color:#FFFFFF;" class="button button-green">$-5</a></li>

        </ul>
    </div>

<table width="100%" height="100%" border="1">
  <tr>
    <td width="20%" height="100">
        <div id="shoppingCart1" class="shoppingCart">
    <div align="center" class="ui-widget-content">
       <ol id="place1" style="list-style:none">
           <li class="placeholder">addyour item here<br/><br/></li>
        </ol>
    </div>
</div>


    </td>
    <td width="20%" height="100">Bank</td>
    <td width="20%" height="100">
        <div id="shoppingCart2" class="shoppingCart">
    <div align="center" class="ui-widget-content">
       <ol id="place2" style="list-style:none">
           <li class="placeholder">addyour item here<br/><br/></li>
        </ol>
    </div>
</div>
    </td>

  </tr>

</table>


        <div width="100%" id="equal"><a href="#" class="button button-green"></a></div>
     <div id="m1"></div>
     <div id="m2"></div>
     <div id="m3"></div>

    <div id="m4"></div>

<强> CSS

#products{font: 13px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: #f2f8fc;}
li.ui-draggable-dragging{
   list-style:none;
}

.ui-widget-content ul li
{
    display: block;
    float: left;
    line-height: 30px;
    list-style:none;
    margin: 0 0px;
    text-decoration:blink;
}
.ui-widget-content
{
   min-height:50px;

}
.hidden{
    visibility:hidden;
}
#equal
{display:none;
}
#e1
{display:none;
}
.button-purple {
  background: #9966cb;
     color:#FFFFFF;
  border-color: #8040be #8040be #733aab;
  background-image: -webkit-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: -moz-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: -o-linear-gradient(top, #a87dd3, #9966cb 66%, #8f57c6);
  background-image: linear-gradient(to bottom, #a87dd3, #9966cb 66%, #8f57c6);
}
.button-purple:active {
  background: #9966cb;
     color:#FFFFFF;
  border-color: #733aab #8040be #8040be;
}
.button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  height: 36px;
  line-height: 35px;
  padding: 0 20px;
  font-size: 20px;
  color:#FFFFFF;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
  background-clip: padding-box;
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.button:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
     color:#FFFFFF;
  pointer-events: none;
  background-image: -webkit-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -moz-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: -o-radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  background-image: radial-gradient(center top, farthest-corner, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}
.button:hover:before {
  background-image: -webkit-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: -moz-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: -o-radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
  background-image: radial-gradient(farthest-corner, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.03));
}
.button:active {
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
     color:#FFFFFF;
}
.button:active:before {
  content: none;
     color:#FFFFFF;
}

.button-pink {
  background: #e8367f;
  border-color: #d31865 #d31865 #bc165a;
  background-image: -webkit-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
  background-image: -moz-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
  background-image: -o-linear-gradient(top, #eb5190, #e8367f 66%, #e62473);
  background-image: linear-gradient(to bottom, #eb5190, #e8367f 66%, #e62473);
}
.button-pink:active {
  background: #e8367f;
  border-color: #bc165a #d31865 #d31865;
}
.button-orange {
  background: #f4902a;
  border-color: #df770c #df770c #c76a0a;
  background-image: -webkit-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
  background-image: -moz-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
  background-image: -o-linear-gradient(top, #f69f47, #f4902a 66%, #f38617);
  background-image: linear-gradient(to bottom, #f69f47, #f4902a 66%, #f38617);
}
.button-orange:active {
  background: #f4902a;
  border-color: #c76a0a #df770c #df770c;
}
.button-green {
  background: #5ca934;
  border-color: #478228 #478228 #3c6f22;
  background-image: -webkit-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
  background-image: -moz-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
  background-image: -o-linear-gradient(top, #69c03b, #5ca934 66%, #54992f);
  background-image: linear-gradient(to bottom, #69c03b, #5ca934 66%, #54992f);
}
.button-green:active {
  background: #5ca934;
  border-color: #3c6f22 #478228 #478228;
}.button-red {
  background: #d5452f;
  border-color: #ae3623 #ae3623 #992f1f;
  background-image: -webkit-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
  background-image: -moz-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
  background-image: -o-linear-gradient(top, #da5c48, #d5452f 66%, #c73d28);
  background-image: linear-gradient(to bottom, #da5c48, #d5452f 66%, #c73d28);
}
.button-red:active {
  background: #d5452f;
  border-color: #992f1f #ae3623 #ae3623;
}
.button-gray {
  background: #47494f;
  border-color: #2f3034 #2f3034 #232427;
  background-image: -webkit-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
  background-image: -moz-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
  background-image: -o-linear-gradient(top, #55585f, #47494f 66%, #3d3f44);
  background-image: linear-gradient(to bottom, #55585f, #47494f 66%, #3d3f44);
}
.button-gray:active {
  background: #47494f;
  border-color: #232427 #2f3034 #2f3034;
}
.tasks {
  margin: 100px auto;
  width: 240px;
  background: white;
  border: 2px solid #cdd3d7;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.ui-widget-header {
  position: relative;
  line-height: 24px;
  padding: 7px 15px;
  color: #5d6b6c;
    align:"center";
  text-shadow: 0 1px rgba(255, 255, 255, 0.7);
  background: #f0f1f2;
  border-bottom: 1px solid #d1d1d1;
  border-radius: 3px 3px 0 0;
  background-image: -webkit-linear-gradient(top, #f5f7fd, #e6eaec);
  background-image: -moz-linear-gradient(top, #f5f7fd, #e6eaec);
  background-image: -o-linear-gradient(top, #f5f7fd, #e6eaec);
  background-image: linear-gradient(to bottom, #f5f7fd, #e6eaec);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.03);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px rgba(0, 0, 0, 0.03);
}

.tasks-title {
  line-height: inherit;
  font-size: 14px;
  font-weight: bold;
  color: inherit;
}

为适当的购物车价值开发警报框

2 个答案:

试试这个： - http://jsfiddle.net/adiioo7/ccf4Q/11/