-2

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

jsfiddle.net/ccf4Q/10/

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

否则“错误”

请帮我解决这个问题

4

2 回答 2

0

I assumed that valid is "new" on the left part and amounts on the right. However you can modify the following checkContents() function with any rule you require. The jquery data function has been used to store the dropped contents at the droppable places by adding code like,

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

at the beginning of each drop callback function. Then the checkContent() function is being called to allow or not the drop to be completed.

http://jsfiddle.net/p3qW4/

Posting complete code in case the fiddle is not available.

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;
}
于 2013-10-30T09:49:47.487 回答
0

试试这个：- 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();

    }
});
于 2013-10-30T09:38:32.740 回答