skip to Main Content

As in the title. I see that jquery dont have this option included, anyone know how to write it by ourself? But within some area?

Like, i have active area of dropped images, that i can select. But i want them deselect, when clicking inside that area, but not when clicked other divs.

if you need try to imagine photoshop interface. Something like that. You can click the interface but clicking inside empty place inside canvas window (area of images) its deselecting.

2

Answers


  1. Since an element with the class ui-selected is what makes an item selected you can simply remove it to deselect.

    $(document).click(function(event) {
        if (!$(event.target).is("#selectable")) {
            $('#selectable .ui-selected').removeClass('ui-selected')
        }
    });
    
    Login or Signup to reply.
  2. jQuery($ => {
      $("#selectable").selectable();
    
      $("#area").on("click", (evt) => {
        $("#selectable").find(".ui-selected").removeClass('ui-selected')
      });
    });
    /*QuickReset*/ * {margin: 0; box-sizing: border-box;}
    
    #area {
      height: 100vh;
    }
    
    #selectable .ui-selected {
      background: red;
    }
    <div id="area">
      <ol id="selectable">
        <li class="ui-widget-content">Item 1</li>
        <li class="ui-widget-content">Item 2</li>
        <li class="ui-widget-content">Item 3</li>
        <li class="ui-widget-content">Item 4</li>
        <li class="ui-widget-content">Item 5</li>
        <li class="ui-widget-content">Item 6</li>
        <li class="ui-widget-content">Item 7</li>
      </ol>
    </div>
    
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search