Question

如果选项是下拉列表中的“选择客户”，如何禁用“external-events-listing”中的拖动选项？并提醒从下拉列表中选择选项？

提前致谢

<select id="client-list" onchange="changeImage(this)" style="width:150px; height:40px; margin-left:18px;margin-top:2px;">
<option value="Choose Client">---Choose Client---</option>
<option value="Client 1">Client 1</option>
<option value="Client 2">Client 2</option>
<option value="Client 3">Client 3</option>
<option value="Client 4">Client 4</option>
<option value="Client 5">Client 5</option>
</select>

    <div id='external-events'>
        <div id='external-events-listing'>
            <h4>Channel List</h4>
            <div class='fc-event'>My Event 1</div>
            <div class='fc-event'>My Event 2</div>
            <div class='fc-event'>My Event 3</div>
            <div class='fc-event'>My Event 4</div>
            <div class='fc-event'>My Event 5</div>
        </div>
    </div>

Answer 1

function testSize(num) {
  if (num < 5){
     x = 1;
  }
  if (num < 10){
    x = 2;
  }
  result = complex calculations;
}
function testSize2(num) {
  if (num < 5){
     x = 1;
  } else if (num < 10){
    x = 2;
  }
  return x * 2;
}
testSize(4); // result is 4
testSize2(4); // result is 2

$('#calendar').fullCalendar({
  // ...
  allDaySlot: false,
  // ...
});

$("#client-list").on("change", function() {
  // ...
  $('#external-events .fc-event').each(function() {
    if ($("#client-list").val() !== "Choose Client") {
      $(this).draggable({
        zIndex: 999,
        revert: true,     
        revertDuration: 0 
      });
    } else {
      $(this).draggable('disable');
    }
  });
  // ...
});

$('#client-list').trigger('change');

如果选择不是“选择客户”，则所有事件都可以拖动。

if (selectedValue !== "Choose Client") {
 $(this).draggable('enable');
} else {
 $(this).draggable('disable');
}

$(document).ready(function() {
  /* initialize the external events
  -----------------------------------------------------------------*/

  $('#external-events .fc-event').each(function() {


    // store data so the calendar knows to render an event upon drop
    $(this).data('event', {
      title: $.trim($(this).text()), // use the element's text as the event title
      stick: true // maintain when user navigates (see docs on the renderEvent method)
    });

    // make the event draggable using jQuery UI
    $(this).draggable({
      zIndex: 999,
      revert: true, // will cause the event to go back to its
      revertDuration: 0 //  original position after the drag
    });

  });

  /* initialize the calendar
  -----------------------------------------------------------------*/

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'agendaDay',
    unselectAuto: false,
    selectable: true,
    allDaySlot: false,
    selectHelper: false,
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar
    drop: function() {},
    eventRender: function(event, element) {
      element.find(".fc-content").append("<span class='close' data-id='" + event._id + "'>x</span>");
    },
    eventResize: function(event, jsEvent, ui, view) {
      console.log("event", event);
    },
  });
});

// remove event on click in calender
$(document).on('click', '.close', function() {

  /* ------------------------------ */
  // debugger; // I commented out 
  /* ------------------------------ */

  var id = $(this).data('id');
  $('#calendar').fullCalendar('removeEvents', id);
  $(this).parent().remove();
});

$("#btnReset").click(function() {
  $('#calendar').fullCalendar('removeEvents');
});
$(document).ready(function() {
  $("#client-list").on("change", function() {
    var selectedValue = $(this).val();

    /* ------------------------------ */
    // location.reload(); // I commented out 
    /* ------------------------------ */

    // IF #client-list value is not 'Choose Client' then all are draggable. ELSE none are draggable.
    /* ------------------------------ */
    $('#external-events .fc-event').each(function() {
      if (selectedValue !== "Choose Client") {
        $(this).draggable('enable');
      } else {
        $(this).draggable('disable');
      }
    });
    /* ------------------------------ */


  });

  // Trigger change on load, to check the current #client-list value and 'enable' / 'disable' draggable to items.
  /* ------------------------------ */
  $('#client-list').trigger('change');
  /* ------------------------------ */

});

button.remove {
  font-size: .85em;
  border: 1px solid #3a87ad;
  background-color: #3a87ad;
  font-weight: 400;
  color: #fff;
  margin: 3px 0;
}

calender-body {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

.fc-content span.close {
  color: #fff;
  opacity: 1;
  text-shadow: none;
  font-size: 16px;
}

#wrap {
  width: 1500px;
  margin: 0 auto;
}

#external-events {
  float: left;
  width: 150px;
  padding: 0 10px;
  border: 1px solid #ccc;
  background: #eee;
  text-align: left;
}

#external-events h4 {
  font-size: 16px;
  margin-top: 0;
  padding-top: 1em;
}

#external-events .fc-event {
  margin: 10px 0;
  cursor: pointer;
}

#external-events p {
  margin: 1.5em 0;
  font-size: 11px;
  color: #666;
}

#external-events p input {
  margin: 0;
  vertical-align: middle;
}

#calendar {
  float: left;
  width: 1150px;
}

.mb-20 {
  margin-bottom: 20px;
}

.as-console-wrapper {
  z-index: 32;
}

如果未从下拉列表中选择选项，如何禁用拖动选项？

1 个答案: