Jquery拖动调整大小选择

时间:2013-11-04 14:10:28

标签: javascript jquery html css jquery-ui

我正在使用Jqueryui drag resize select一起拖动和调整大小工作正常但选择不正常。 的 JSFiddle

我的代码是: -

CSS -

 .dr {
    background: none repeat scroll 0 0 #63F;
    color: #7B7B7B;
    height: 50px;

    text-shadow: 1px 1px 2px #FFFFFF;
    width: 50px;
    position:absolute;
    }
.bg_section {
    border: 1px solid #E4E3E3;
    height: 290px;
    margin: 48px auto 0;
    position: relative;
    width: 400px;
}

JS -

$(document).ready(function(){
         var selected = $([]), offset = {top:0, left:0}; 
         $( "#dialog-form" ).dialog({
          autoOpen: false,
         height: 300,
         width: 350,
         modal: true,
         buttons: {
         "Add": function() {
            section = $( "#section" ).val();
            divid = $( "#divdata" ).val();
            divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
           // $( ".add" ).appendTo( $( "#"+section) );
            $( divstring ).appendTo( $( "."+section) );
            $( "."+section).selectable();
            $("#divdata option[value="+ divid+"]").remove();
            $("#"+divid).draggable({
                 containment: "."+section,
                 grid: [ 10, 10 ],
                  start: function(ev, ui) {
                    if ($(this).hasClass("ui-selected")){
                        selected = $(".ui-selected").each(function() {
                           var el = $(this);
                           el.data("offset", el.offset());
                        });
                    }
                    else {
                        selected = $([]);
                        $(".dr").removeClass("ui-selected");
                    }
                    offset = $(this).offset();
                },
                drag: function(ev, ui) {
                    var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
                    // take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
                    selected.not(this).each(function() {
                         // create the variable for we don't need to keep calling $("this")
                         // el = current element we are on
                         // off = what position was this element at when it was selected, before drag
                         var el = $(this), off = el.data("offset");
                        el.css({top: off.top + dt, left: off.left + dl});
                    });
                },
                stop: function(e, ui) {  
                     var Stoppos = $(this).position();
                     var leftPos=Stoppos.left;
                     var topPos= Stoppos.top;
                     var dragId=ui.helper[0].id;
                    // alert(leftPos/10);
                    // alert(topPos/10);
                     // alert(dragId);
                    sectionWidth= $('#'+dragId).parent().width();
                    sectionHeight = $('#'+dragId).parent().height();
                 },
          }).resizable({
             containment: "."+section,
             grid: [10,10],
             start: function(e, ui) {
                 // alert($(".paper-area").width());
                //containment: ".paper-area",
                $(this).css({
                //  position: "absolute",
                 });
            },
            stop: function(e, ui) {
                 // containment: ".paper-area",
                $(this).css({
                //   position: "absolute",
                });
            }
        });


      },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {

      }
    });

$( "body" ).on( "click", ".dr", function(e) {   


    if (e.metaKey == false) {

        // if command key is pressed don't deselect existing elements
        $( ".dr" ).removeClass("ui-selected");
        $(this).addClass("ui-selecting");
    }
    else {


        if ($(this).hasClass("ui-selected")) {
            // remove selected class from element if already selected
            $(this).removeClass("ui-selected");
        }
        else {
            // add selecting class if not
            $(this).addClass("ui-selecting");
        }
    }

    $( ".bg_section" ).data(".bg_section")._mouseStop(null);
});


$(".add").click(function() {
     $( "#dialog-form" ).dialog( "open" );
     $("#new_field").hide();
     $("#save_new").hide();
});


$(".add_new").click(function() {
    $(".add_new").hide();
    $("#new_field").show();
    $("#save_new").show();

});

$("#save_new").click(function() {

    $( "#divdata" ).append($('<option>', {
    value: $("#new_field").val(),
    text:  $("#new_field").val(),
    class:'add',
    }));

    $("#new_field").hide();
    $("#save_new").hide();
    $(".add_new").show();

});
}) 

HTML -

 <div id="dialog-form" title="Add fields in Section">
  <p class="validateTips">All form fields are required.</p>
   <div class="add_new">Add</div>
   <input type="text" id="new_field"/>
   <div id="save_new">save</div> 
  <form>
  <fieldset>
  <label for="divdata">Divs</label>
  <select name="divdata" id="divdata">

    <option value="dr1">Div1</option>
    <option value="dr2">Div2</option>
    <option value="dr3">Div3</option>
    <option value="dr4">Div4</option>
    <option value="dr5">Div5</option>

  </select>

      </br>

  <label for="section">Section</label>
<select name="section" id="section">
    <option value="paper-area">Header</option>
    <option value="paper-area-detail">Detail</option>
    <option value="paper-area-qty">Items</option>
    <option value="paper-area-sub">Total</option>
    <option value="paper-area-footer">Footer</option>
</select>

  </fieldset>
  </form>
</div>

<div class="main_bg">



<div class="textarea-top">

<div class="textarea-field">
<div class="field-icon add"><a href="#"><img src="<?php echo Yii::app()->baseUrl;?>/images/bill_add-field-icon.png" alt="add" border="0" width="29" height="25" /></a></div>

</div>


<div class="paper-area bg_section" id="paper_area">


</div>


<div class="paper-area-detail bg_section">



</div>

<div class="paper-area-qty bg_section">

</div>

<div class="paper-area-sub bg_section">

</div>

<div class="paper-area-footer bg_section"></div>

</div>

我正在使用drag-select进行拖动调整大小。应该感谢任何帮助。

4 个答案:

答案 0 :(得分:2)

似乎是一个奇怪的错误/与jquery ui dragable和/或resizeable发生冲突。只有selectable的某些部分与其他两个函数结合使用。如果你检查具有所有三个函数的元素,并且你试图选择其中一个函数,它只获得“ui-selecting”类,这是一个超时类和选项,可选择但停在那里。通常以这种方式替换类:

  1. UI-征召员
  2. UI-选择
  3. UI选择的。
  4. 如果删除了可拖动和可调整大小的函数,可选择的东西正常工作(但代码中还有其他错误)

    我想可以将所有这些功能结合起来,但你必须使用选项回调来让它按照你想要的方式运行。也许不是因为这些冲突而你想要的一切都可能。

答案 1 :(得分:2)

调整大小的最简单方法是在CSS中使用resize:both;max-height:__px;max-width:__px;

答案 2 :(得分:1)

事实上,似乎jquery ui draggable和selectable不能很好地协同工作。然而,其他人已发布解决方案。请看以下内容,

http://words.transmote.com/wp/20130714/jqueryui-draggable-selectable/ http://jsfiddle.net/6f9zW/light/ (这来自上面的文章)

由于在拖动和选择时检查状态似乎是一个很好的工作解决方案,我也会在下面发布它以防网站出现故障。

<强> JS

// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0}; 

$( "#selectable > div" ).draggable({
    start: function(ev, ui) {
        if ($(this).hasClass("ui-selected")){
            selected = $(".ui-selected").each(function() {
               var el = $(this);
               el.data("offset", el.offset());
            });
        }
        else {
            selected = $([]);
            $("#selectable > div").removeClass("ui-selected");
        }
        offset = $(this).offset();
    },
    drag: function(ev, ui) {
        var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
        // take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
        selected.not(this).each(function() {
             // create the variable for we don't need to keep calling $("this")
             // el = current element we are on
             // off = what position was this element at when it was selected, before drag
             var el = $(this), off = el.data("offset");
            el.css({top: off.top + dt, left: off.left + dl});
        });
    }
});

$( "#selectable" ).selectable();

// manually trigger the "select" of clicked elements
$( "#selectable > div" ).click( function(e){
    if (e.metaKey == false) {
        // if command key is pressed don't deselect existing elements
        $( "#selectable > div" ).removeClass("ui-selected");
        $(this).addClass("ui-selecting");
    }
    else {
        if ($(this).hasClass("ui-selected")) {
            // remove selected class from element if already selected
            $(this).removeClass("ui-selected");
        }
        else {
            // add selecting class if not
            $(this).addClass("ui-selecting");
        }
    }

    $( "#selectable" ).data("selectable")._mouseStop(null);
});

// starting position of the divs
var i = 0;
$("#selectable > div").each( function() {
    $(this).css({
        top: i * 42 
    });
    i++;
});

<强> CSS

#selectable .ui-selecting {background: #FECA40;}
#selectable .ui-selected {background: #F39814; color: white;}
#selectable {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
#selectable > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}

<强> HTML

<div id="selectable">
  <div class="ui-widget-content">Item 1</div>
  <div class="ui-widget-content">Item 2</div>
  <div class="ui-widget-content">Item 3</div>
  <div class="ui-widget-content">Item 4</div>
  <div class="ui-widget-content">Item 5</div>
</div>

描述类似问题和解决方案的其他主题,

Is there a JQuery plugin which combines Draggable and Selectable

jQuery UI : Combining Selectable with Draggable

答案 3 :(得分:0)

我找到了一个解决方案现在我们可以一起使用* Drag-Resize-Select - *

Example- 代码: -

CSS: -

.ui-selecting {background: #FECA40;}
.ui-selected {background: #F39814; color: white;}
.bg_section {margin: 0; padding: 0; height: 300px; position: relative; padding:0; border:solid 1px #DDD;}
.bg_section > div {position: absolute; margin: 0; padding:10px; border:solid 1px #CCC; width: 100px;}
.ui-selectable-helper {position: absolute; z-index: 100; border:1px dotted black;}

JS: -

var selected = $([]);   // list of selected objects
var lastselected = '';  // for the shift-click event


$(document).ready(function(){

         $( "#dialog-form" ).dialog({
          autoOpen: false,
         height: 300,
         width: 350,
         modal: true,
         buttons: {
         "Add": function() {
            section = $( "#section" ).val();
            divid = $( "#divdata" ).val();
            divstring="<div class='dr' id='"+divid+"'>"+divid+"</div>";
           // $( ".add" ).appendTo( $( "#"+section) );
            $( divstring ).appendTo( $( "."+section) );
            $("#divdata option[value="+ divid+"]").remove();
            $("#"+divid).draggable({
                 containment: "."+section,
                 grid: [ 10, 10 ],
                 start: function(ev, ui) {
                $(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
                selected = $(".ui-selected").each(function() {
                    $(this).addClass("dragging");
                });
            },
            drag: function(ev, ui) {

            },
                stop: function(e, ui) {  
                    selected.each(function() {
                    $(this).removeClass("dragging");
                    });



                     var Stoppos = $(this).position();
                     var leftPos=Stoppos.left;
                     var topPos= Stoppos.top;
                     var dragId=ui.helper[0].id;
                    // alert(leftPos/10);
                    // alert(topPos/10);
                     // alert(dragId);
                    sectionWidth= $('#'+dragId).parent().width();
                    sectionHeight = $('#'+dragId).parent().height();
                 },
          }).resizable({
             containment: "."+section,
             grid: [10,10],
             start: function(e, ui) {
                 // alert($(".paper-area").width());
                //containment: ".paper-area",
                $(this).css({
                //  position: "absolute",
                 });
            },
            stop: function(e, ui) {
                 // containment: ".paper-area",
                $(this).css({
                //   position: "absolute",
                });
            }
        });
        $("#paper_area").selectable();

      },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {

      }
    });

$( "body" ).on( "click", ".dr", function(evt) { 


            id = $(this).attr("id");

            // check keys
            if ((evt.shiftKey) && (lastselected != '')) {
                // loop all tasks, select area from this to lastselected or vice versa
                bSelect = false;
                $(".task").each(function() {
                    if ($(this).is(':visible')) {
                        if ($(this).attr("id") == id || $(this).attr("id") == lastselected)
                            bSelect = !bSelect; 

                        if (bSelect || $(this).attr("id") == lastselected || $(this).attr("id") == lastselected) {
                            if (!$(this).hasClass("ui-selected"))
                                $(this).addClass("ui-selected");
                        }
                        else
                            $(this).removeClass("ui-selected");
                    }
                });
                return;
            }
            else if (!evt.ctrlKey)
                $(".ui-selected").removeClass("ui-selected"); // clear other selections

            if (!$(this).hasClass("ui-selected")) {
                $(this).addClass("ui-selected");
                lastselected = id;
            }
            else {
                $(this).removeClass("ui-selected");
                lastselected = '';
            }
});


$(".add").click(function() {
     $( "#dialog-form" ).dialog( "open" );
     $("#new_field").hide();
     $("#save_new").hide();
});


$(".add_new").click(function() {
    $(".add_new").hide();
    $("#new_field").show();
    $("#save_new").show();

});

$("#save_new").click(function() {

    $( "#divdata" ).append($('<option>', {
    value: $("#new_field").val(),
    text:  $("#new_field").val(),
    class:'add',
    }));

    $("#new_field").hide();
    $("#save_new").hide();
    $(".add_new").show();

});
})